В этой статье мы рассмотрим четыре способа центрирования div по горизонтали и вертикали с помощью CSS Grid. Конечно, эти методы центрирования можно использовать для любого элемента.
Настройка
Давайте сначала создадим контейнер с простым элементом box внутри, который мы будем использовать для демонстрации этих методов центрирования. Вот HTML:
<article> <div></div> </article>
И вот наш стартовый CSS:
article { width: 100%; min-height: 100vh; background: black; display: grid; } div { width: 200px; background: yellow; height: 100px; }
Во всех наших примерах мы будем использовать это display: gridсвойство. Это устанавливает <article> элемент как контейнер сетки и создает сетку на уровне блоков для этого контейнера.
1. Отцентрируйте Div с помощью CSS Grid и поместите себя
Мой любимый способ центрировать элемент с помощью Grid — использовать place-self свойство.
Центрировать наш div очень просто:
article { display: grid; } div { place-self: center; }
Свойство place-selfявляется сокращением для свойств (по align-selfвертикали) и justify-self(по горизонтали) (которые полезны, если вы просто центрируете по одной оси).
Использование place-selfнастолько просто, что это очевидное решение. Но это не единственный способ центрировать элемент с помощью сетки, поэтому давайте теперь рассмотрим некоторые другие методы.
Преимущество использования place-selfзаключается в том, что оно применяется к центрируемому элементу, а это означает, что вы также можете использовать его для центрирования других элементов в том же контейнере. (Попробуйте добавить больше элементов div в демо-версию CodePen и посмотрите, что получится.)
2. Центрируйте Div с помощью CSS Grid, выравнивания содержимого и выравнивания элементов
Давайте теперь посмотрим, что связано с использованием Grid justify-contentи align-itemsцентрированием нашего div.
Свойство justify-contentиспользуется для выравнивания элементов контейнера по горизонтали, когда элементы не используют все доступное пространство. Есть много способов установить это justify-contentсвойство, но здесь мы просто установим его в center.
Как и justify-contentсвойство, align-itemsсвойство используется для выравнивания содержимого в контейнере, но оно выравнивает содержимое по вертикали, а не по горизонтали.
Вернемся к нашему тестовому HTML и добавим в родительский контейнер следующий код:
article { display: grid; justify-content: center; align-items: center; }
Очевидным преимуществом этого метода является то, что он требует меньше кода, поскольку центрирование обрабатывается контейнером. Но в некотором смысле нацеливание на div через его контейнер также является недостатком, поскольку это также повлияет на любой другой элемент в контейнере.
3. Центрируйте Div с помощью CSS Grid и Auto Margins
Как всегда, мы нацелимся на родительский контейнер с помощью display: grid. Мы также назначим блоку div автоматическое поле, используя margin: auto. Это заставляет браузер автоматически вычислять доступное пространство вокруг дочернего элемента div и делить его по вертикали и горизонтали, размещая элемент div посередине:
article { display: grid; } div { margin: auto; }
4. Центрируйте Div с помощью CSS Grid и элементов размещения
Свойство place-itemsиспользуется для выравнивания элементов по вертикали и горизонтали в сетке. Его можно использовать для центрирования нашего div, ориентируясь на контейнер следующим образом:
article { display: grid; place-items: center; }
Как и place-selfсвойство, place-itemsэто сокращение для двух свойств, в данном случае justify-items(горизонтальное) и align-items(вертикальное).
В отличие от place-self, place-itemsприменяется к контейнеру, что придает ему немного меньшую гибкость.
Заключение
Каждый из этих методов позволяет центрировать div по горизонтали и вертикали внутри контейнера. Как я уже сказал, я предпочитаю place-selfметод, главным образом потому, что он применяется к центрируемому элементу, а не к контейнеру. То же самое и для margin: autoметода. Но, конечно, если вы хотите центрировать элемент только в одном направлении, вы также можете использовать либо, align-selfлибо justify-self.
В демонстрационных примерах мы только что использовали пустой div, но, конечно, вы можете добавить содержимое в div, и центрирование по-прежнему будет работать. И, опять же, эти методы центрирования работают с элементами, отличными от div.