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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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