Рубрика: Статьи по дизайну

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

С автозапуском

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

 .  товар  {
     позиция :  абсолютная ;
     верх :  0 ;  низ :  0 ;
     маржа :  авто ;
     высота :  50   vh ;
}
 

С отрицательными полями

В этом методе мы размещаем вершину в средней точке (на 50%) в вертикальном направлении. Затем используйте отрицательное поле, чтобы переместить верхнюю половину элемента выше средней точки.

 .  товар  {
     позиция :  абсолютная ;
     верх :  50  % ;
     слева :  10   vw ;  справа :  10   vw ;
     высота :  50   vh ;
     верхний край :  -25   vh ;  / * также учитываем размеры отступов и границ, если таковые имеются, при расчете поля * / 
}
 

Здесь мы также должны явно указать высоту элемента, чтобы получить правильное значение для margin-top. Но в большинстве случаев мы не хотим устанавливать явную высоту для элементов, учитывая, что высота должна учитывать изменения ширины, корректировки текста и т. Д. Следовательно, эти два метода в большинстве случаев не идеальны для вертикального центрирования.

Нет необходимости в росте с переводчиком

Мы можем настроить последний метод центрирования, чтобы найти решение, которое избегает проблемы с явными высотами. Здесь, после размещения верхней части элемента в центре, мы используем translateY, чтобы переместить его на 50% по оси Y.

  .item {
    позиция: абсолютная;
    верх: 50%;
    преобразовать: translateY (-50%);
}
 

Таблицы и вертикальное выравнивание

CSS поддерживает свойство vertical-align для содержимого, размещенного внутри ячеек таблицы. Мы можем воспользоваться этим и объявить элемент ячейкой таблицы (а его родительский элемент — таблицей), чтобы центрировать его содержимое. Если вы используете div, установите для его отображения значение table-cell. Или вы можете использовать фактические элементы таблицы, но это решение семантически неверно.

 .  контейнер  {
     дисплей :  таблица ;
}

.  товар  {
     отображение :  таблица   -   ячейка ;
     вертикальное выравнивание :  среднее ;
}
 

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

Вертикальное центрирование с использованием гибкости

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

Единственным недостатком этих гибких решений является то, что они не поддерживаются более ранними версиями Internet Explorer (ниже IE9). И вы должны использовать префикс webkit, moz или ms для поддержки некоторых других старых версий браузеров.

Но даже тогда flex добавляет невероятную гибкость в управление макетами страниц и позиционированием элементов. Здесь мы рассмотрим несколько способов центрировать контент с помощью гибкости.

С гибкими контейнерами и элементами выравнивания

Мы можем указать выравнивание элементов внутри родительского гибкого блока, используя свойства align-items и justify-content. Когда мы устанавливаем align-items на center, он вертикально центрирует все элементы внутри flexbox, если flex-direction равно row (по умолчанию).

  .container {
    дисплей: гибкий;
    align-items: center;
}
 

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

С гибкими элементами и самовыравниванием

Это решение дает вам свободу центрировать по вертикали только один элемент внутри гибкого бокса. Он использует свойство гибкости, align-self, для размещения элемента в центре.

 .  контейнер  {
     дисплей :  гибкий ;
}

.  центр  {
     выровнять себя :  центр ;
}
 

С гибким контейнером и автоматической маржей

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

 .  контейнер  {
     дисплей :  гибкий ;
}

.  товар  {
     маржа :  авто ;
}
 

С призрачными элементами внутри гибкого контейнера

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

 .  контейнер  {
     дисплей :  гибкий ;
     гибкое направление :  столбец ;
}

.  контейнер  ::  до  .  контейнер  ::  после  {
     содержание :  "" ;
     гибкий :  1 ;
}
 

Вертикальное центрирование с использованием сетки CSS

Сетка — одно из самых мощных дополнений к CSS за последние годы. Поскольку это позволяет нам управлять макетом по осям x и y, вертикальное центрирование с помощью сетки CSS довольно просто. И это дает нам несколько способов решения этой задачи.

Подобно flexbox, сетка не полностью поддерживается более старыми версиями современных браузеров, включая Internet Explorer, Chrome и Firefox. В некоторых более старых версиях есть возможность включить поддержку сетки, даже если она недоступна по умолчанию.

Первые несколько способов вертикального центрирования с сеткой следуют шаблону, аналогичному тому, что мы сделали с flexbox. Давайте посмотрим на примеры того, как они работают.

С сеткой и элементами выравнивания

Мы можем вертикально центрировать все элементы внутри сетки, установив для свойства align-items значение center.

 .  контейнер  {
     дисплей :  сетка ;
     align-items :  center ;
}
 

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

С элементом сетки и самовыравниванием

Если вы хотите центрировать только один элемент внутри сетки, используйте align-self: center для стилизации этого конкретного элемента.

 .  контейнер  {
     дисплей :  сетка ;
}

.  центр  {
     выровнять себя :  центр ;
}
 

С Grid Container и Margin Auto

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

 .  контейнер  {
     дисплей :  сетка ;
}

.  центр  {
     маржа :  авто ;
}
 

С призрачными элементами на сетке

Мы можем настроить трюк с призрачным элементом, который мы проделали с помощью flexbox, в сетку CSS. Для этого сначала нам нужно создать сетку из трех рядов. Затем добавляемые элементы-призраки занимают пространство первой и последней строк, чтобы переместить наш элемент в средний ряд.

 .  контейнер  {
     дисплей :  сетка ;
     сетка-шаблон-строки :  повторить  ( 3  1  fr);
}

.  контейнер  ::  до  .  контейнер  ::  после  {
     содержание :  "" ;
}
 

С точным размещением элементов

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

 .  контейнер  {
     дисплей :  сетка ;
     сетка-шаблон-строки :  повторить  ( 3  1  fr);
}

.  товар  {
     сетка-строка :  2 ;
}
 

Подведение итогов

Сегодня мы обсуждали, как решить одну из повторяющихся головных болей в жизни веб-разработчика — вертикальное центрирование контента. Мы говорили о почти 13 различных методах решения этой задачи. Я надеюсь, что это все. Если у вас есть еще какие-то приемы и советы по вертикальному центрированию контента, не забудьте поделиться ими с нами в комментариях.

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