У вас включен AdBlock или иной блокировщик рекламы.

Пожалуйста, отключите его, доход от рекламы помогает развитию сайта и появлению новых статей.

Спасибо за понимание.

В другой раз
DevGang блог о програмировании
Авторизоваться

Центрирование в CSS с помощью Flexbox

Центрирование элементов на странице, особенно вертикальное центрирование, в прошлом было сложно сделать с CSS, и нам приходилось делать ряд хаков. К счастью, Flexbox все упрощает, и теперь мы можем сосредоточить нашу энергию проектирования на проблемах более высокого уровня.

Ниже приведено очень простое руководство по центрированию элементов с использованием Flexbox.

Горизонтальное центрирование

Начнем с div, который содержит два абзаца, которые мы хотим центрировать по горизонтали на одной оси. Это так же просто, как использование свойства justify-content со значением центра на контейнере:

<div class="box flex">
  <p>
    <img src="/images/pirate.svg" width="75">
    arrr!
  </p>
  <p>
    <img src="/images/cowboy.svg" width="75">
    yeehaw!
  </p>
</div>
.box.flex {
  display: flex;
  justify-content: center;
}

.box {
  padding: .5rem;
  height: 300px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.03);
  border-radius: 4px;

  color: #84613D;
  font-family: "Lucida Console", Monaco, monospace;
  background: #FDF9EA;
  border-bottom: 1px solid #F9F2D6;
  border-right: 1px solid #F9F2D6;
}

.box p {
  max-width: 125px;
  text-align: center;
  background: rgba(255,255,255,0.5);
  margin: .25rem;
  padding: .25rem;
}

Вертикальное центрирование

Flexbox действительно мощный инструмент, когда нам также нужно центрировать элементы по вертикали. Вот наш пример, но с гибкими элементами также центрированы по вертикали:

.box.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

Вертикальное центрирование на всей странице

Если вы хотите поместить элемент по центру страницы, это может быть немного сложнее, потому что элементы не имеющие высоты и ширины будут располагаться только по вертикали в соответствии с высотой их контейнера. Это означает, что сам контейнер должен быть такой же высоты, как и сама страница. Это достаточно просто сделать, используя 100vh - 100% высоты окна просмотра.

Вот простой пример:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dead center!</title>
    <style>
      body {
        margin: 0;
      }

      .center-me {
        display: flex;
        justify-content: center;
        align-items: center;

        height: 100vh;
      }
    </style>
  </head>
  <body>

    <div class="center-me">
      <p>😇 Bonjour center!</p>
    </div>

  </body>
</html>

#CSS