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

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

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

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

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

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

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

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

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

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

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

Теперь перейдем к способам с помощью которых мы можем центрировать наш div Основной

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

Теперь перейдем к способам с помощью которых мы можем центрировать наш div Основной

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

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

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

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

Этот подход полезен для некоторых текстов или div которые вы хотите отцентрировать только

При таком подходе 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

Заключение

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

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

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

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.