Четыре эффективных способа центрирования блочных элементов в CSS

RedDeveloper
08.04.2022 16:00
Четыре эффективных способа центрирования блочных элементов в CSS

Мы будем использовать такие свойства как position, margin,  text-align и, наконец, flexbox в CSS для центрирования нашего блока div в DOM-дереве.

У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то способ, мы все равно не получаем желаемого результата, и наш пользовательский интерфейс ломается. В этой статье я дам вам необходимые советы, которые помогут вам сделать красивый дизайн, не нарушая пользовательского интерфейса.

Создание необходимого HTML и CSS для нашего проекта

Стартовый HTML код

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

The HTML markup required for project

Эта HTML-разметка содержит наш div , который должен быть отцентрирован, и он связан с нашим файлом CSS (style.css).

Создание CSS файла style.css

Теперь перейдем к способам, с помощью которых мы можем центрировать наш div. Основной стиль нашего div таков. Здесь я создал div высотой и шириной 200px и фоновым цветом красный. Я также установил margin и padding всего HTML равными 0, но это вопрос личных предпочтений.

1. Свойство CSS position для центрирования div

centering the div using position property

Этот подход часто использовался в ранние времена CSS для центрирования div на странице. При этом div присваивается абсолютная позиция, чтобы его можно было вывести из естественного потока документа. Левый верхний угол div помещается в центр страницы путем перемещения его на 50% сверху и слева. Теперь с помощью translate(-50%,-50%) сдвинем div к верху на 50% от его высоты и влево на 50% от его ширины. Таким образом, центр div будет совпадать с центром страницы. Вот что теперь будет на нашей странице.

div центрируется на странице по горизонтали и вертикали
div центрируется на странице по горизонтали и вертикали

2. Центрирование div с помощью свойства margin

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

Gave the margin auto in this image

При таком подходе div автоматически устанавливает свои поля в соответствии с пространством, которое он имеет в DOM. Единственная оговорка заключается в том, что он работает только для блочных элементов, поэтому он не сработает для любых inline или inline-block элементов, поскольку они занимают только необходимое пространство в DOM, в то время как блочные элементы занимают все пространство DOM по горизонтали. Вот как это выглядит в нашем проекте:-

Div центрирован по горизонтали в DOM
Div центрирован по горизонтали в DOM

3. Выравниваем Div по центру с помощью свойства flexbox

Итак, сейчас мы воспользуемся новейшим подходом к центрированию div в CSS, которым является flexbox. Он делает горизонтальное поле и вертикальное поле, которые делят страницу на четыре квадранта с центром страницы в качестве начала координат.

Это контейнер flexbox
Это контейнер flexbox

Горизонтальное поле называется главной осью , а вертикальное поле - поперечной осью. Чтобы сделать flex-контейнер, необходимо установить отображение родительского элемента на flex, а также жестко закодировать высоту и ширину родительского элемента. Таким образом, вы создадите гибкий контейнер.

Вот как элемент превращается во flex-контейнер
Вот как элемент превращается во flex-контейнер

Мы преобразовали наш body в flex-контейнер и задали ему высоту 100viewport height, а ширину 100viewport width. Мы можем центрировать div по горизонтали с помощью свойства justify-content, установленного в center. Это центрирует div по главной оси гибкого контейнера. Для центрирования div по вертикали мы используем свойство align-items, установленное в center. Оно центрирует div по поперечной оси гибкого контейнера. Это наш div, снова центрированный по центру страницы.

Этот div центрируется с помощью свойства flexbox
Этот div центрируется с помощью свойства flexbox

4. Выравнивание текста по центру в блоке div

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

Установка свойства text-align center для div
Установка свойства text-align center для div

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

Текст отцентрирован внутри div
Текст отцентрирован внутри div

Заключение

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

Получение данных из формы с помощью JavaScript - краткое руководство
Получение данных из формы с помощью JavaScript - краткое руководство

17.11.2022 16:30

Получить данные из формы с помощью JS очень просто: вы запрашиваете элемент формы, передаете его конструктору new FormData() и, наконец, получаете нужную информацию с помощью метода .get().

Пользовательские правила валидации в Laravel
Пользовательские правила валидации в Laravel

16.11.2022 13:12

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

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML

15.07.2022 14:37

Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно является внешний метод. Это помогает сохранить код незагроможденным и организованным. Однако ситуация может диктовать использование двух других методов....

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly

16.05.2022 21:25

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

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

18.04.2022 13:17

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно использовать выбранный нами фреймворк, и он становится основным подходом к каждому новому продукту. Однако существует и другой подход к разработке. Вы...

Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React

13.04.2022 15:26

Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей. Первое, что вам нужно сделать, это установить гем Flatpickr через npm. Вы можете найти эту информацию на их сайте или просто использовать следующий код: