Последнее обновление 10.01.2024 — Василий Иванов
Быстрые ссылки
- Простой HTML-файл для тренировки центрирования
- Использование Flexbox для центрирования элемента Div
- Использование CSS Grid для центрирования элемента Div
- Использование CSS-позиционирования для центрирования элемента Div
Ключевые выводы
- Центрирование элементов в веб-макетах всегда было сложной задачей, но современный CSS теперь поддерживает легкое центральное позиционирование.
- Flexbox — наиболее широко используемый метод центрирования элементов, обеспечивающий гибкую модель макета, позволяющую легко выравнивать.
- CSS Grid и CSS-позиционирование также являются эффективными методами центрирования элементов на веб-странице, обеспечивая точный контроль над макетом и выравниванием.
Центрирование элемента в вашем веб-макете — задача, которая всегда расстраивала дизайнеров. Это не всегда было легко сделать, но многие проекты требуют центрального расположения. К счастью, современный CSS теперь имеет хорошую поддержку центрирования.
Узнайте, как центрировать элемент div по горизонтали и вертикали с помощью Flexbox, CSS Grid и CSS-позиционирования.
Простой HTML-файл для тренировки центрирования
Во всех следующих примерах используется минимальный HTML-документ для демонстрации центрирования с помощью CSS. Используйте эту разметку и меняйте CSS в соответствии с каждым разделом, чтобы увидеть, как ведут себя эти свойства.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; }
body { height: calc(100vh - 16px); }
</style>
</head>
<body>
<div></div>
</body>
</html>
Использование Flexbox для центрирования элемента Div
Вам необходимо понять основы Flexbox, прежде чем использовать его для центрирования элемента div. К счастью, Flexbox использует простой подход, поэтому он наиболее широко используется. Он предоставляет гибкую модель макета, которая позволяет легко выравнивать и распределять пространство между элементами в контейнере, что делает его идеальным для центрирования элементов.
Используйте следующий CSS для достижения центрирования с помощью Flexbox.
- Оберните элемент div в контейнер. Примените свойство display: flex к контейнеру, чтобы активировать макет Flexbox. В простом тестовом примере тело может служить контейнером:
body {
display: flex;
} - Используйте свойства justify-content и align-items для выравнивания элементов по главной оси (горизонтальной) и поперечной оси (вертикальной) соответственно. Чтобы центрировать обе оси, установите для этих свойств значение center. Для простой демонстрации вам также следует установить высоту тела на 100vh, чтобы вы могли увидеть эффект вертикального выравнивания.
body {
justify-content: center;
align-items: center;
} - Присвойте div цвет фона, чтобы визуализировать его размещение на последней странице:
div { background-color: red; }
Просматривая результат в DevTools Google Chrome, вы можете увидеть, как два свойства контролируют выравнивание по каждой оси:
Использование CSS Grid для центрирования элемента Div
Использование CSS Grid для центрирования элемента — еще один эффективный метод, предлагающий точный контроль над макетом и выравниванием.
- Определите контейнер для вашего макета и примените стиль display:grid, чтобы активировать CSS Grid. В данном случае контейнером служит тело.
body {
display: grid;
} - Используйте свойстваgrid-template-columns иgrid-template-rows, чтобы определить структуру вашей сетки. Для центрирования будет достаточно одного столбца и строки, поэтому используйте 1fr для обоих.
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
} - Используйте свойство Place-items, чтобы центрировать содержимое сетки как по горизонтали, так и по вертикали.
body {
place-items: center;
} - Оформите фон вашего элемента div, чтобы он визуализировался в центре контейнера сетки.
div {
background-color: blue;
}
В этом случае одно свойство управляет центральным размещением элемента div на вашей странице:
Использование CSS-позиционирования для центрирования элемента Div
Чтобы использовать свойство позиции CSS для центрирования элемента div, вам также необходимо понимать, как работают преобразования CSS с переходами. Вот пошаговое руководство с примером.
- Чтобы позиционировать элемент div, убедитесь, что его контейнер имеет относительное положение. Это устанавливает контекст относительного позиционирования, поэтому вы можете разместить элемент div в центре его контейнера.
body {
position: relative;
} - Примените абсолютное позиционирование к элементу div, затем используйте свойства top и left, чтобы расположить верхний левый угол элемента div точно в центре его контейнера.
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: green;
}Преобразование «translate(-50%, -50%)» перемещает элемент div влево и вверх на половину его ширины и половины высоты.
Этот метод работает, сначала центрируя верхний угол элемента, а затем перемещая его относительно на половину ширины и половину высоты.
Flexbox, CSS Grid и CSS-позиционирование — это мощные инструменты, которые можно использовать для центрирования элементов на веб-странице. С помощью Flexbox вы можете центрировать как по горизонтали, так и по вертикали с помощью всего лишь нескольких строк кода. CSS Grid обеспечивает мощное выравнивание в двух измерениях, и вы можете использовать позиционирование CSS для центрирования элемента относительно его родительского контейнера.
С помощью этих методов вы можете гарантировать, что ваши веб-страницы будут выглядеть чисто и профессионально.
