Как выровнять по центру в CSS

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

Все примеры в этой статье интерактивные. Размеры и расположение элементов в них можно менять. Для этого нужно просто ...

Подсказка: наведите курсор на правый нижний угол.

Как в CSS выровнять по горизонтали?

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

text-align: center

Самый быстрый и простой способ выровнять текст или изображение по центру родительского элемента - использовать свойство CSS text-align: center. Чтобы этот метод работал, элементы, которые вы хотите отцентровать, должны иметь свойство display - inline или inline-block, а их родительский элемент должен быть блочным (block или inline-block). Поэтому если text-align: center не работает, проверьте, все ли в порядке со свойством display.

<style>
  .container {
    padding: 50px;
  }
</style>

<div class="container">
  <div class="content"></div>
</div>

<style>
  .container {
    height: 36px;
    white-space: nowrap;
  }
  
  .container div, .container span {
    line-height: 36px;
  }
  
  .inline-block {
    display: inline-block;
  }
</style>

<div class="container">
  <span>Lorem ipsum</span>
  <div class="inline-block">Dolor sit amet</div>
</div>

Обратите внимание, что значения height и line-height должны быть равными.

vertical-align: middle

Свойство CSS vertical-align выравнивает элемент по вертикали относительно родительского элемента, окружающего текста или ячейки таблицы. Однако с ним не все так просто. Это свойство работает только для inline-элементов (span, img и т.д) и элементов с display: inline-block;

Кроме того, при помощи свойства vertical-align можно выровнять по вертикали содержимое ячеек таблицы. Этим можно воспользоваться для того, чтобы выровнять блочный элемент, хакнуть систему, так сказать.

.center {
  display: table-cell; 
  vertical-align: middle;
  width: 500px;
  height: 300px;
}

Для того, чтобы этот метод работал, как задумано, нужно задать абсолютные (в px) размеры родительского элемента. У дочернего элемента ширина и высота могут быть относительными (например, в %).

Лично я не рекомендую использовать этот способ. Он старый и глючный, был придуман во времена, когда еще нужно было оптимизировать под Internet Explorer, не нужно было делать дизайн адаптивным и не существовало flexbox и других современных способов, о которых речь пойдет ниже.

transform: translate()

Свойство CSS transform позволяет двигать, вращать, изменять размер и форму элемента. Этот инструмент настоящий must have для создания современных адаптивных и интерактивных дизайнов. Поэтому ему будет посвящена отдельная статья (а может и две ;)

В рамках этой статьи рассмотрим использование свойства transform c функцией translate() в качестве значения. Суть метода сводится к следующему:

.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
}

Обратите внимание, что родительскому элементу нужно задать position: relative; иначе дочерний элемент будет выравниваться относительно ближайшего родителя с position: relative или, если такого нет, - относительно страницы.

Итак, мы выровняли элемент по центру. Или не совсем по центру? Дело в том, что по центру выравнивается левый верхний угол блока (так сказать, начало его координат). Если блок имеет фиксированный размер и он нам известен, можно сдвинуть его (блок) на расстояние равное половине размера при помощи свойства margin.

.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  
  width: 200px; 
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
}

Но лучше воспользоваться волшебным свойством transform: translate(-50%, -50%); Оно также сдвигает блок на половину его длины и высоты соответственно, при этом нам не нужно указывать абсолютные размеры. Для адаптивного дизайна то, что нужно!

flexbox CSS

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

Ну а пока вернемся к выравниванию по центру. 

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<div class="container">
  <div class="item"> ... </div>
</div>

Теперь давайте разберемся, что все это значит.

display: flex

При помощи этого свойства преобразуем родительский элемент в так называемый гибкий контейнер (flex container), при этом все вложенные элементыпервого уровня (т.е. непосредственные дочерние элементы) становятся так называемыми гибкими элементами(flex items), и вместе это все составляет flexbox лэйаут.

justify-content: center

Это свойство выравнивает содержимое контейнера по центру вдоль основной оси. Одним из ключевых моментов в модели flexbox является ось, вдоль которой располагаются элементы контейнера (свойство flex-direction). Ось может быть либо горизонтальной (row или row-reverse), либо вертикальной (column или column-reverse). По умолчанию используется значение row, т.е. наши элементы располагаются по горизонтальной оси слева направо.

align-items: center

Кроме основной оси в flexbox есть перпендикулярная ей второстепенная ось. В данном случае, она вертикальная. Свойство align-items описывает, как элементы контейнера расположены относительно нее.

Вот примерно то, что должно получиться.

Преимущество этого метода в его лаконичности, адаптивности (я имею в виду респонсивность) и, конечно, гибкости. Так, например, если вам нужно, чтобы по центру был не один блок, а несколько - просто добавьте их в HTML, никаких изменений в CSS вносить при этом не нужно. Ну разве не прелесть?!

Как вы, наверное догадались я предпочитаю использовать именно этот способ. Но это не значит, что я не пользуюсь другими. Все эти способы можно и нужно использовать (за исключением способа с vertical-align: middle и display: table-cell ), каждый в своей ситуации. Например, незачем использовать flexbox если вам просто нужно выровнять текст или картинку по центру горизонтально.

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