Центрирование <div> и <table> на экране: CSS-решение
Быстрый ответ
Если вам необходимо центрировать элемент <div>
на экране, можно воспользоваться гибкими возможностями CSS flexbox. Примените к родительскому <div>
стили display: flex
, justify-content: center
и align-items: center
, обозначая их так:
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Затем, поместите ваш контент внутрь .center-container
:
<div class="center-container">
<div>Ваш контент здесь — прямо в центре!</div>
</div>
Таким образом, ваш контент будет равномерно расположен по центру как по вертикали, так и по горизонтали.
Детали позиционирования с помощью CSS
Основы позиционирования
Flexbox — достаточно современный и эффективный способ центрирования. Однако, традиционные методы все еще актуальны. Ниже мы рассмотрим, каким образом <div>
может оказаться в центре внимания.
Классическое абсолютное центрирование
Абсолютное позиционирование требует знания размеров элемента. Особенно важно использование transform
для коррекции смещения.
.center-absolute {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 150px;
transform: translate(-50%, -50%);
}
Центрирование с применением "гибкого каркаса"
Данный метод предлагает подход, позволяющий более свободно позиционировать элемент при переменных его размерах, при этом сохраняя его в центре.
.center-flexible {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 50%;
height: 50%;
}
Продвинутое центрирование для уверенных пользователей
Дерзкое центрирование с фиксированным позиционированием
Установите position: fixed
, если требуется зафиксировать элемент в области viewport, независимо от прокрутки страницы. Этот подход актуален, например, при создании модальных окон.
.center-fixed {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Имейте в виду возможные перекрытия с другим содержимым — используйте такой метод с осмотрительностью.
Абсолютное центрирование с автоматическими отступами margin: auto
Абсолютное позиционирование с margin: auto
создаст эффект содержимого, как бы парящего в воздухе.
.center-margin-auto {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 200px;
height: 200px;
}
Я рекомендую избегать инлайновых стилей: это обычно считается плохой практикой, усложняющей поддержку кода.
Центрирование нового поколения: CSS Grid
CSS Grid позволяет выполнить центрирование совсем просто, используя всего одно свойство:
.grid-container {
display: grid;
place-items: center;
height: 100vh;
}
Так, центрирование становится проще, чем когда-либо!
Визуализация
Следующую схему можно использовать как песочницу для ваших тестов:
┌─────────────────┐
│ │
│ │
│ 🛸 │
│ │
│ │
└─────────────────┘
Здесь рамка отображает экран, внутренний прямоугольник — родительский <div>
, а 🛸 — центрируемый дочерний <div>
.
.screen {
display: flex;
justify-content: center;
align-items: center;
}
И вот, 🛸 ровно посередине!
Учитывание реальных условий
Адаптивность: каждый пиксель имеет значение
Учитывая различие размеров экранов, ваш дизайн должен быть адаптивным. Для совершенствования отображения на разных устройствах используйте медиа-запросы .
Уважение к пользователям со старыми браузерами
Не забывайте обладателей старых версий браузеров — ваша работа будет воспринята с благодарностью, если вы предложите альтернативы современным CSS-свойствам.
Использование обёрток <div>
для сложных макетов
Если задача центрирования кажется более сложной, чем простое расположение одного элемента по центру, вы можете использовать дополнительные <div>
, что облегчит процедуру компоновки и управления стилями.