Как центрировать контент по вертикали и по горизонтали с помощью Flexbox

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

Сейчас мы пошагово покажем, как легко центрировать контент по вертикали и горизонтали.

Давайте поработаем с помощью этого примера:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #big-box{
      width: 200px;
      height: 200px;
      background-color: #666666;
      }
      #small-box{
      width: 100px;
      height: 100px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Центрирование контента</h2>
    <div id="big-box">
      <div id="small-box"></div>
    </div>
  </body>
</html>

Здесь имеет два div элемента. Наша задача - центрировать "small-box" id внутри "bix-box" id.

  1. Сначала мы используем свойство width, чтобы установить width для двух блоков. Установите необходимый размер.
  2. Потом установите высоту блоков, используя свойство height.
  3. Установите выбранные вами цвета для div элементов, используя свойство background-color.
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
}
#small-box{
width: 100px;
height: 100px;
background-color: #8ebf42;
}
  1. Следующим шагом укажите макет с помощью свойства display. Чтобы использовать Flexbox, установите display: flex. (display: -Webkit-flex;)
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
display: -webkit-flex;
}
Значение flex должно использоваться вместе с расширением -webkit- для Safari, Google Chrome и Opera.

Ничто не изменится, если попробуйте этот код. Выполните следующие шаги!

  1. Добавьте свойство align-items. Это свойство указывает вертикальное выравнивание контента внутри флекс-контейнера. Необходимо установить свойство align-items в значение "center", чтобы по вертикали центрировать контент.
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
}

Сейчас примените код и увидите, что "small-box" центрирован относительно вертикальной оси.

После того, как div элемент вертикально центрирован, можно центрировать его и по горизонтали.

  1. Необходимо применить свойство justify-content, которое выравнивает контент по горизонтали. Устанавливаем свойство justify-content в значение "center":
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
align-items: center;
justify-content: center;
-webkit-align-items: center;
}

Мы достигли нашей цели!

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #big-box{
      width: 200px;
      height: 200px;
      background-color: #666666;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-align-items: center;
      }
      #small-box{
      width: 100px;
      height: 100px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Центрирование контента</h2>
    <div id="big-box">
      <div id="small-box"></div>
    </div>
  </body>
</html>
-Webkit- для Safari, Google Chrome и Opera (новые версии) используется вместе со свойством align-items.

Рассмотрим другой пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .flexbox-container {
      background: #cccccc;
      display: flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      height: auto;
      margin: 0;
      min-height: 500px;
      }
      .flexbox-item {
      max-height: 50%;
      background: #666666;
      font-size: 15px;
      }
      .fixed {
      flex: none;
      max-width: 50%;
      }
      .box {
      width: 100%;
      padding: 1em;
      background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Центрирование контента</h2>
    <div class="flexbox-container">
      <div class="flexbox-item fixed">
        <div class="box">
          <h2>Центрирован с помощью Flexbox</h2>
          <p contenteditable="true">Этот блок центрирован и по вертикали и по горизонтали. </p>
        </div>
      </div>
    </div>
  </body>
</html>

Блок остается центрированным, даже если текст меняется.