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

30.10.2020 12:12

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

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

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

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

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

text-align: center

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

margin: auto

При помощи свойства margin можно центрировать блочные элементы. Однако margin: auto работает только для выравнивания по горизонтали. К тому же, обязательно должна быть задана ширина (width, min-width или max-width). Если ее не задать, блок растянется на всю ширину родительского элемента.

Если ширина блока неизвестна или вы не хотите ее жестко ограничивать, данный метод не подходит.

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

Часто именно выравнивание по вертикали вызывает большое количество трудностей и непонимания. Но на самом деле ничего сложного в этом нет. Давайте разберемся по порядку.

padding или line-height

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

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

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

Другой способ - выравнивание содержимого по вертикальному центру при помощи свойства line-height. Он подойдет тогда, когда высота элемента фиксированная и задана при помощи свойства height, а содержимое этого элемента помещается в одну строку (согласен, слишком много ограничений). 

<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 если вам просто нужно cвыровнять текст или картинку по центру горизонтально.

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

Комментарии

Оставьте свой комментарий

(18 + 25) ^ 77

© 2020 SITEROST

Ничего не найдено