Получить профессию в Skypro
Центрирование таблицы в div по горизонтали и вертикали в CSS
Быстрый ответ
Для центрирования таблицы как по горизонтали, так и по вертикали в элементе div, наиболее оптимальным методом будет использование CSS Flexbox. Примените к div свойство display: flex;, затем добавьте justify-content: center; и align-items: center; для точного позиционирования. Основное условие – задать div определенную высоту. Вот базовый код:
.centered-div {
display: flex; /* Изменяем div на flex контейнер */
justify-content: center; /* Центрируем содержимое по горизонтали */
align-items: center; /* Центрируем содержимое по вертикали */
height: 100px; /* Задаем высоту контейнера */
}<div class="centered-div">
<table>
<!-- Строки и ячейки таблицы помещаем сюда -->
</table>
</div>
Классический метод: Margin auto
Для горизонтального центрирования традиционно используется margin: auto;. Это подходит в случае, если использование Flexbox кажется чересчур новаторским:
.centered-table {
margin-left: auto; /* Двигаем таблицу к центру с левого края */
margin-right: auto; /* Сбалансированно центрируем и с правой стороны */
}<div>
<table class="centered-table">
<!-- Формируем вашу таблицу, добавляя строки и ячейки -->
</table>
</div>Центрирование с использованием свойств position и transform
Когда Flexbox недоступен, для центрирования можно использовать CSS-позиционирование совместно с transform. Этот набор инструментов весьма эффективен:
.centered-div {
position: relative; /* Становится опорой для абсолютного позиционирования */
height: 200px; /* Необходимо установить высоту */
}
.centered-table {
position: absolute; /* Координаты top и left будут относительно родителя */
top: 50%; /* Смещаемся вниз от верхнего края */
left: 50%; /* Смещаемся вправо от левого края */
transform: translate(-50%, -50%); /* Устанавливаем положение таблицы по центру */
}Адаптивность под различные устройства
Чтобы сохранить адаптивность вашего дизайна, используйте процентные значения или единицы, связанные с размерами viewport:
.centered-div {
display: flex;
justify-content: center;
align-items: center;
height: 50vh; /* Высота относительно размеров экрана */
}
.centered-table {
width: 50%; /* Таблица займет половину доступного пространства */
/* Не забывайте адаптировать дизайн под разные устройства! */
}Кроссбраузерная совместимость
При работе с разными браузерами—используйте вендорные префиксы для обеспечения совместимости:
.centered-div {
display: -webkit-box; /* Специально для старых версий iOS */
display: -ms-flexbox; /* Для поддержки IE 10 */
display: flex; /* Стандартное свойство для современных браузеров */
justify-content: center;
align-items: center;
}Всегда тестируйте CSS свойства на различных браузерах.
Центрирование фонового изображения
Чтобы центрировать фоновое изображение в div, делается следующим образом:
div {
background: url('your-image.jpg') no-repeat center center; /* Центрируем изображение */
background-size: cover; /* Подгоняем изображение под размеры области просмотра */
}Выравнивание inline-block
Тем, кто отдает предпочтение классическим методам, рекомендуется использовать inline-block с text-align: center; для родительского div для горизонтального и vertical-align: middle; для вертикального выравнивания:
.centered-div {
text-align: center; /* Горизонтальное выравнивание текста */
height: 200px; /* Устанавливаем высоту контейнера для вертикального выравнивания */
line-height: 200px; /* Совмещаем внутреннюю высоту с высотой контейнера */
}
.centered-table {
display: inline-block; /* Таблица как блочно-строчный элемент */
vertical-align: middle; /* Центрируем по вертикали */
}Визуализация
Представьте картину (🖼️), идеально центрированную на стене:
Стена: [🛋️=======🖼️=======🛋️]В контексте HTML стена — это ваш div, а картина — ваша таблица.
CSS Flexbox или Grid — это невидимые руки, которые точно и идеально устанавливают картину (таблицу) по центру стены (div):
div {
display: flex; /* Можно использовать и grid для центрирования */
justify-content: center; /* Горизонтальное выравнивание */
align-items: center; /* Вертикальное выравнивание */
}Результат:
🛋️😌🖼️😌🛋️
Теперь ваша таблица — так же, как звезда, светящаяся в центре вашего div.