3 современных метода CSS для центрирования элементов

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

Хорошо, давайте перейдем к делу.

Действительно странно, что так долго было так сложно просто размещать элементы в центре контейнера в Интернете. Что ж, горизонтальное центрирование было простым, но вертикальное центрирование было практически невозможным вплоть до недавнего времени.

Использование CSS-позиционирования для центрирования элементов

Этот первый метод, использующий позиционирование CSS, вероятно, существует дольше всех, но он немного развился по мере появления новых свойств. Давайте посмотрим на пример.

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

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

 strong { position: absolute; }

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

 div { position: relative; }

Теперь мы можем расположить наш элемент ниже пятидесяти процентов высоты нашего div и более пятидесяти процентов ширины. Для позиционирования сверху вниз мы можем использовать новое логическое свойство inset-block-start со значением пятьдесят процентов. А для позиционирования слева мы можем использовать inset-inline-start с тем же значением пятьдесят процентов.

 strong { ... inset-block-start: 50%; inset-inline-start: 50%; } 

Хорошо, значит, он не совсем по центру, не так ли?

Ну, это потому, что мы разместили элемент в центре нашего div , но его положение основано на его верхнем левом углу. Теперь нам нужно сдвинуть элемент назад на пятьдесят процентов его высоты и назад на пятьдесят процентов его ширины. Это позволит правильно разместить его в центре. Но как мы можем это сделать?

На самом деле это очень легко. Мы можем использовать новое свойство translate CSS. Первое значение будет перемещаться вдоль оси X. Нам нужно вернуться на пятьдесят процентов назад, поэтому мы добавим значение минус пятьдесят процентов. А второе значение перемещается по оси Y, и мы присвоим ему то же значение, равное минус пятидесяти процентам.

 strong { ... translate: -50% -50%; } 

И вот мы идем. Идеально центрировано.

Вот окончательный рабочий пример использования позиционирования и перевода:

Итак, это один из способов сделать это, но он не мой любимый.

Использование Flexbox для центрирования элементов

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

Итак, мы начинаем с одной и той же точки: у нас есть внешний элемент div с красной рамкой, а затем наш внутренний сильный элемент.

Начнем с того, что сделаем наш div гибким контейнером с дисплеем flex. Затем мы можем выровнять наш элемент по центру вдоль оси X с помощью свойства justify-content и значения center. И последнее, но не менее важное: мы можем выполнить выравнивание по оси Y с помощью свойства align-items и того же значения center.

 div { display: flex; justify-content: center; align-items: center; } 

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

Вот окончательный рабочий пример использования Flexbox:

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

Использование сетки для центрирования элементов

Хорошо, та же отправная точка с красным полем и внутренним элементом.

На этот раз мы сделаем наш div контейнером сетки с display значением grid . Что здесь круто, так это то, что мы можем использовать те же два свойства, которые мы использовали для нашего примера с флексбоксом, если захотим. Мы можем добавить justify-content: center и align-items: center . Это работает точно так же.

 div { display: grid; justify-content: center; align-items: center; }

Забавно, но именно так работает сетка: она может использовать те же свойства выравнивания поля, что и flexbox. Но если бы мы оставили все как есть, в использовании сетки не было бы никакого преимущества, верно?

Вместо этого мы можем удалить эти свойства выравнивания и заменить их свойством Place-Items. И мы можем присвоить этому свойству значение center.

 div { display: grid; place-items: center; } 

Итак, теперь мы сократили все до двух строк CSS.

Вот окончательный рабочий пример использования CSS Grid:

Заключение

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