Как центрировать элементы CSS с помощью Flexbox

Amber

9 месяцев назад

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

Это очень простое руководство расскажет вам, как центрировать элементы с помощью Flexbox.

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

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

<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;
}

Если вы просто хотите, чтобы по вертикали были центрированы определенные flex элементы, вы можете установить свойство align-self:

.flex p:last-child {
  align-self: center;
}

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

Поместить элемент четко по центру страницы немного сложнее, потому что flex-элементы будут центрироваться только по вертикали в соответствии с высотой их контейнера. Следовательно, сам контейнер должен быть той же высоты, что и вся страница, чтобы это работало. Это достаточно легко сделать, используя единицы измерения области просмотра, где 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>

Примечание: Обратите также внимание, что поле страницы нужно обязательно сбрасывать до 0, иначе на странице получится небольшая прокрутка.

Читайте также: Единицы измерения CSS: rem vs em