По центру экрана css: Выравниваем блок по центру страницы / Хабр

html — Как сделать, чтобы блок был всегда по центру экрана?

Задать вопрос

Вопрос задан 3 года 8 месяцев назад

Изменён 3 года 8 месяцев назад

Просмотрен 330 раз

как сделать, чтобы блок main-block был всегда по центру экрана, даже если уменьшили масштаб окна в браузере? Но адаптивность сохранилась.

.title {
  margin: 10px auto 25px;
}

.block-row {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  max-width: 700px;
}

. box {
  position: relative;
  width: 320px;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.block {
  position: relative;
  width: 300px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid red;
}

<div>
  <h2>Tittle of this page</h2>
  <div>
    <div>
      <div>
        some text in block
      </div>
      <div>
        text there
      </div>
    </div>
    <div>
      <div>
        some text in block
      </div>
      <div>
        text there
      </div>
    </div>
  </div>
</div>

• html
• css

4

Вот так

.main-block{padding:0px; margin:0px auto;}

7

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css3 — CSS Как поставить элемент по центру экрана, что б не влияли на другие элементы?

Задать вопрос

Вопрос задан 2 месяца назад

Изменён 2 месяца назад

Просмотрен 28 раз

Есть вот такой упрощенный пример

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #000;
  overflow: hidden;
  color: #fff;
  font-family: sans-serif;
}
body:before{
  content:"";
  position: fixed;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100vh;
  background-color: #00f;
  z-index: 10;
}
body:after{
  content:"";
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #00f;
  z-index: 10;
}
. block_img {
  align-self: center;
  width: 20vh;
  height: 20vh;
  background-color: #0f0;
}
.testment {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.block {
  margin: 2vh 2vw;
  border: 1px solid #f00;
}

<div></div>
<div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, at minima laudantium illo! Nobis minus non sit, voluptate natus id.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem unde recusandae assumenda debitis et vel iure provident voluptatum, dolorum sint ullam iste sequi. Qui aliquid ipsa reprehenderit cumque, sapiente, dolorum tempore iste tenetur commodi
    distinctio vero. Consectetur quis odit veritatis!</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae maiores voluptates soluta quam, nam quibusdam!</div>
</div>

Страница с контентом ограничена по размерам областью видимости экрана устройства.

Вопрос — Как задать CSS что б салатовый блок, всегда был по центру экрана (Через position:absolute, position:fixed не предлагать) а его размещение не влеяло на нижний блок со списком?

• css
• css3
• центрирование

Ну вот так получилось через grid

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  align-items: center;
  background-color: #000;
  overflow: hidden;
  color: #fff;
  font-family: sans-serif;
}
body:before{
  content:"";
  position: fixed;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100vh;
  background-color: #00f;
  z-index: 10;
}
body:after{
  content:"";
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #00f;
  z-index: 10;
}
.block_img {
  width: 20vh;
  height: 20vh;
  background-color: #0f0;
  grid-row-start: 1;
  grid-column-start: 1;
  margin: 0 auto;
}
.testment {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 4;
  grid-row-start: 1;
  grid-column-start: 1;
}
.
  block {
  margin: 2vh 2vw;
  border: 1px solid #f00;
}

<div></div>
<div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, at minima laudantium illo! Nobis minus non sit, voluptate natus id.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem unde recusandae assumenda debitis et vel iure provident voluptatum, dolorum sint ullam iste sequi. Qui aliquid ipsa reprehenderit cumque, sapiente, dolorum tempore iste tenetur commodi
    distinctio vero. Consectetur quis odit veritatis!</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae maiores voluptates soluta quam, nam quibusdam!</div>
</div>

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Учебное пособие: Как вертикально выровнять центр экрана при прокрутке с помощью CSS появилось, а ваш бокс остался вверху экрана, а вы говорите «о, черт!».

Искал по всему интернету и нашел только, как контейнер можно выровнять по центру экрана, а не при прокрутке? Думаю, эта статья решит вашу проблему.

Проблема

Здесь мы предполагаем, что вы выровняли свой контейнер по центру экрана с абсолютной позицией. Если у вас все еще есть эта проблема, вы можете посетить Как выровнять центр на экране при использовании абсолютного положения с CSS. Как только ваш контейнер выровняется по центру экрана. Вы сталкиваетесь с проблемой, когда он следует за вами, пока вы прокручиваете экран вниз. Я люблю говорить, что контейнеру не хватает настойчивости! Давайте сделаем его настойчивым, чтобы следовать за вашим скроллером.

Концепция

По сути, вы можете решить, что ваш контейнер не выровнен по центру при прокрутке с помощью следующей концепции:

• Вы можете создать код jQuery/JavaScript для достижения этой цели, заставив контейнер гоняться за вашим скроллером. Таким образом, изменение положения контейнера при каждом движении скроллера. (плохо)
• Другой способ — просто использовать CSS (что мы и делаем), чтобы обмануть вышеупомянутый эффект. Вместо того, чтобы гоняться за скроллером, мы зафиксировали положение в центре экрана, имея при этом абсолют для покрытия всех остальных элементов!

Мы будем использовать второй подход, который является более эффективным и более правильным. Причина, по которой его положение должно быть зафиксировано, заключается в том, что контейнер не должен двигаться! Таким образом, оставайтесь в центре экрана при прокрутке. Причина, по которой он также должен быть позиционирован как абсолютный, заключается в том, что нам нужно скрыть все элементы ниже, чтобы никто из пользователей не мог нажимать на элементы!

Решение

Уловка довольно проста после того, как вы выполнили выравнивание по центру на экране с абсолютным положением. Я беру следующий код из статьи и изменяю его так, чтобы контейнер оставался в центре при прокрутке.

 #коробка
{
ширина: 150 пикселей;
высота: 150 пикселей;
фон: красный;
отступ: 5px;
граница: #CCC сплошная 1px;
выравнивание текста: по центру;
положение: фиксированное;
поле слева: -75px;
верхнее поле: -75px;
слева: 50%;
верх: 50%;

}
 

Выше тот, что был в статье по ссылке.

Теперь я просто немного изменю стиль на красный и размер соответственно, а новый код, который заставит его оставаться в центре, будет следующим:

 #коробка
{
ширина: 150 пикселей;
высота: 150 пикселей;
фон: #000;
отступ: 5px;
граница: #CCC сплошная 5px;
выравнивание текста: по центру;
положение: фиксированное;
поле слева: -75px;
верхнее поле: -75px;
слева: 50%;
верх: 50%;
}
 

Основными изменениями были «позиция: фиксированная», которая фиксировала ваш контейнер в центре экрана, когда бы он ни перемещался! Достаточно настойчивости.

Демонстрация

Следующие ссылки представляют собой демонстрацию контейнера с сохранением и непостоянством:

• Демонстрация персистентного контейнера
• Демонстрация контейнера без сохранения

Горизонтальное центрирование структуры вашего веб-сайта с помощью CSS

Создание отказоустойчивых систем на AWS : узнайте, как спроектировать и внедрить отказоустойчивую отказоустойчивую инфраструктуру с высокой доступностью на AWS.

Каждый веб-программист знает, что вы не можете написать код коммерческого веб-сайта для определенного браузера или уровня взаимодействия с пользователем, не говоря уже о разрешении экрана. Поскольку вы не можете рассчитывать на то, что у пользователя будет самое последнее и самое лучшее, вам нужно использовать наименьший общий знаменатель разрешения браузеров. В современном веб-мире 1024×768 обычно является самым низким разрешением, для которого кодируется браузер.

Я предпочитаю создавать свои веб-сайты с фиксированной шириной, чтобы иметь полный контроль над макетом веб-сайта. Веб-сайт фиксированной ширины выглядит одинаково во всех браузерах, что может помешать пользователям с очень большими или маленькими разрешениями столкнуться с проблемами макета. Вместо того, чтобы просто позволить веб-сайту полностью выровняться по левому краю экрана (в результате чего пользователи с высоким разрешением увидят, что ваш веб-сайт занимает только половину экрана), я центрирую сайт. Это очень простая задача.

Шаг первый: HTML

Объявите DOCTYPE. Создайте начальный DIV-оболочку, который будет оболочкой веб-сайта.

 

<голова>


<тело>
<дел>

/* "auto" делает левое и правое поля центрированными оберткой */
#сворачивать {
ширина: 900 пикселей;
поле: 0 авто;
}