Как выровнять по центру Div с помощью CSS Grid?

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

Содержание

Настройка
1. Отцентрируйте Div с помощью CSS Grid и поместите себя
2. Центрируйте Div с помощью CSS Grid, выравнивания содержимого и выравнивания элементов
3. Центрируйте Div с помощью CSS Grid и Auto Margins
4. Центрируйте 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> элемент как контейнер сетки и создает сетку на уровне блоков для этого контейнера.

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

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.