Как разместить div по центру div: Выравниваем блок по центру страницы / Хабр

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

1. Центрировать Div с помощью CSS Grid и place-self

Мой любимый способ центрировать элемент с помощью Grid — использовать свойство place-self . (Подробнее об этом можно прочитать здесь.)

Центрировать наш div очень просто:

 article {
  отображение: сетка;
}
дел {
  место-я: центр;
}
 

См. Pen
Centering Using Grid and place-self от SitePoint (@SitePoint)
на CodePen.

Свойство

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

Преимущество использования place-self заключается в том, что он применяется к центрируемому элементу, а это означает, что вы также можете использовать его для центрирования других элементов в том же контейнере. (Попробуйте добавить больше элементов div в демо-версию CodePen и посмотрите, что получится.)

2. Центрируйте Div с помощью CSS Grid, justify-content и align-items

Теперь посмотрим, что связано с использованием Grid с justify-content

Свойство justify-content используется для выравнивания элементов контейнера по горизонтали, когда элементы не используют все доступное пространство. Есть много способов установить свойство justify-content , но здесь мы просто установим его на center .

Как и свойство justify-content , свойство align-items используется для выравнивания содержимого в контейнере, но оно выравнивает содержимое по вертикали, а не по горизонтали.

Вернемся к нашему тестовому HTML и добавим в родительский контейнер следующий код:

 article {
  отображение: сетка;
  выравнивание содержимого: по центру;
  выравнивание элементов: по центру;
}
 

См. Pen
Centering Using Grid, align-self и justify-self от SitePoint (@SitePoint)

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

3. Центрирование Div с CSS Grid и Auto Margins

Как всегда, мы нацелимся на родительский контейнер с дисплей: сетка . Мы также назначим блоку div автоматическое поле, используя поле : auto . Это заставляет браузер автоматически вычислять доступное пространство вокруг дочернего элемента div и делить его по вертикали и горизонтали, размещая элемент div посередине:

 article {
  отображение: сетка;
}
дел {
  маржа: авто;
}
 

См. Pen
Центрирование элемента с помощью сетки CSS, выравнивание содержимого и выравнивание элементов от SitePoint (@SitePoint)
на CodePen.

(Кроме того, есть много других интересных вещей, которые вы можете делать с полями CSS.)

4. Центрирование элемента Div с помощью CSS Grid и размещение элементов

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

 article {
  отображение: сетка;
  место-предметы: центр;
}
 

См. Pen
Center a Div с сеткой CSS и автоматическими полями от SitePoint (@SitePoint)
на CodePen.

Подобно свойству place-self , place-items — это сокращение для двух свойств, в данном случае элементов выравнивания (по горизонтали) и элементов выравнивания (по вертикали). Вы можете поэкспериментировать с ними в этой демонстрации CodePen.

В отличие от place-self , place-items применяется к контейнеру, что делает его немного менее гибким.

Заключение

Каждый из этих методов позволяет центрировать div по горизонтали и вертикали внутри контейнера. Как я уже сказал, я предпочитаю метод place-self , главным образом потому, что он применяется к центрируемому элементу, а не к контейнеру. То же самое для поля : метод auto . Но, конечно, если вы хотите центрировать элемент только в одном направлении, вы также можете использовать либо align-self , либо justify-self .

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

Дополнительная литература:

• Flexbox или CSS Grid? Как принимать разумные планировочные решения
• Мастер CSS, 3-е издание
• Введение в CSS Grid Layouts
• Современный макет CSS

Как центрировать div по горизонтали в CSS

2 месяца назад

от Sharqa Hameed

В HTML элемент div является важным элементом и часто используется при разработке веб-сайтов. Однако самое главное — насколько эффективно разработчик использует элемент div для достижения своей цели; Правильно ли расположен div? Требуется ли выравнивание по центру? Это общие вопросы, которые могут возникнуть у разработчиков, когда они думают об улучшении внешнего вида веб-страницы.

Этот пост расскажет о методе выравнивания div по центру по горизонтали с помощью CSS.

Чтобы центрировать div по горизонтали, мы проверим перечисленные ниже свойства CSS:

• свойство margin
• свойство позиции
• свойство отображения

Давайте продолжим и рассмотрим перечисленные свойства один за другим.

В CSS свойство « margin » используется для создания пространства вокруг элементов HTML сверху, снизу, справа или слева. Мы также можем использовать свойство margin для центрирования элементов, таких как div.

Для этого следуйте приведенному примеру.

Вот контейнер нашей HTML-страницы, и мы хотим выровнять его по центру по горизонтали:

В нашем файле CSS мы укажем « border » в качестве значения « 0.2em solid », чтобы увидеть наш элемент div, используйте свойство « width » вместе со значением « 50% », чтобы переопределить ширину нашего div по умолчанию. Наконец, установите свойство « margin » и укажите его значение как « auto », чтобы центрировать div по горизонтали:

Приведенное ниже изображение показывает, что мы успешно выровняли добавленный элемент div по центру по горизонтали:

Чтобы установить положение различных элементов HTML, можно использовать свойство CSS « position ». Это свойство необходимо объединить со свойством « left », чтобы центрировать div по горизонтали.

Посмотрите на пример для лучшего понимания.

Чтобы стилизовать наш контейнер, мы будем использовать свойство « position » и установим его значение как « absolute ». Затем укажите свойство « left » со значением « 25% ». Это создаст свободное пространство с левой стороны и выровняет div по центру:

Вывод

Теперь давайте проверим последний метод.

Свойство « display » определяет поведение выбранного элемента. Это свойство имеет несколько основных значений, обеспечивающих различные функциональные возможности, например, когда значение « flex » используется со свойством отображения, чтобы сделать коробку или контейнер гибкими. Кроме того, вы также можете использовать свойство отображения вместе с « align-items », чтобы поместить div в центр по горизонтали.

В наш HTML-файл мы добавили тег