Центрирование таблицы в div по горизонтали и вертикали в CSS

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для центрирования таблицы как по горизонтали, так и по вертикали в элементе div, наиболее оптимальным методом будет использование CSS Flexbox. Примените к div свойство display: flex;, затем добавьте justify-content: center; и align-items: center; для точного позиционирования. Основное условие – задать div определенную высоту. Вот базовый код:

CSS

Скопировать код

.centered-div {
  display: flex; /* Изменяем div на flex контейнер */
  justify-content: center; /* Центрируем содержимое по горизонтали */
  align-items: center; /* Центрируем содержимое по вертикали */
  height: 100px; /* Задаем высоту контейнера */
}

HTML

Скопировать код

<div class="centered-div">
  <table> 
    <!-- Строки и ячейки таблицы помещаем сюда -->
  </table>
</div>

Пройдите тест и узнайте подходит ли вам сфера IT

Пройти тест

Классический метод: Margin auto

Для горизонтального центрирования традиционно используется margin: auto;. Это подходит в случае, если использование Flexbox кажется чересчур новаторским:

CSS

Скопировать код

.centered-table {
  margin-left: auto; /* Двигаем таблицу к центру с левого края */
  margin-right: auto; /* Сбалансированно центрируем и с правой стороны */
}

HTML

Скопировать код

<div>
  <table class="centered-table">
    <!-- Формируем вашу таблицу, добавляя строки и ячейки -->
  </table>
</div>

Центрирование с использованием свойств position и transform

Когда Flexbox недоступен, для центрирования можно использовать CSS-позиционирование совместно с transform. Этот набор инструментов весьма эффективен:

CSS

Скопировать код

.centered-div {
  position: relative; /* Становится опорой для абсолютного позиционирования */
  height: 200px; /* Необходимо установить высоту */
}

.centered-table {
  position: absolute; /* Координаты top и left будут относительно родителя */
  top: 50%; /* Смещаемся вниз от верхнего края */
  left: 50%; /* Смещаемся вправо от левого края */
  transform: translate(-50%, -50%); /* Устанавливаем положение таблицы по центру */
}

Адаптивность под различные устройства

Чтобы сохранить адаптивность вашего дизайна, используйте процентные значения или единицы, связанные с размерами viewport:

CSS

Скопировать код

.centered-div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh; /* Высота относительно размеров экрана */
}

.centered-table {
  width: 50%; /* Таблица займет половину доступного пространства */
  /* Не забывайте адаптировать дизайн под разные устройства! */
}

Кроссбраузерная совместимость

При работе с разными браузерами—используйте вендорные префиксы для обеспечения совместимости:

CSS

Скопировать код

.centered-div {
  display: -webkit-box; /* Специально для старых версий iOS */
  display: -ms-flexbox; /* Для поддержки IE 10 */
  display: flex; /* Стандартное свойство для современных браузеров */
  justify-content: center;
  align-items: center;
}

Всегда тестируйте CSS свойства на различных браузерах.

Центрирование фонового изображения

Чтобы центрировать фоновое изображение в div, делается следующим образом:

CSS

Скопировать код

div {
  background: url('your-image.jpg') no-repeat center center; /* Центрируем изображение */
  background-size: cover; /* Подгоняем изображение под размеры области просмотра */
}

Выравнивание inline-block

Тем, кто отдает предпочтение классическим методам, рекомендуется использовать inline-block с text-align: center; для родительского div для горизонтального и vertical-align: middle; для вертикального выравнивания:

CSS

Скопировать код

.centered-div {
  text-align: center; /* Горизонтальное выравнивание текста */
  height: 200px; /* Устанавливаем высоту контейнера для вертикального выравнивания */
  line-height: 200px; /* Совмещаем внутреннюю высоту с высотой контейнера */
}

.centered-table {
  display: inline-block; /* Таблица как блочно-строчный элемент */
  vertical-align: middle; /* Центрируем по вертикали */
}

Визуализация

Представьте картину (🖼️), идеально центрированную на стене:

Markdown

Скопировать код

Стена: [🛋️=======🖼️=======🛋️]

В контексте HTML стена — это ваш div, а картина — ваша таблица.

CSS Flexbox или Grid — это невидимые руки, которые точно и идеально устанавливают картину (таблицу) по центру стены (div):

CSS

Скопировать код

div {
  display: flex;             /* Можно использовать и grid для центрирования */
  justify-content: center;   /* Горизонтальное выравнивание */
  align-items: center;       /* Вертикальное выравнивание */
}

Результат:

Markdown

Скопировать код

🛋️😌🖼️😌🛋️
Теперь ваша таблица — так же, как звезда, светящаяся в центре вашего div.

Свежие материалы

Работа с полями структур в C

30 августа 2024

Указатели и массивы в C

30 августа 2024

Структуры и объединения в C

30 августа 2024