HTML тег <center>
Тег <center> выравнивает содержимое по центру. Его аналог в CSS — свойство text-align. Смотрите примеры.
HTML-тег <center> устарел и не должен использоваться на новых страницах. Это был блочный элемент, горизонтально центрировавший всё внутри себя, однако он был удалён из стандарта HTML и больше не поддерживается в HTML5. Современные браузеры могут по-прежнему отображать его для обратной совместимости, но его поведение не гарантировано, и он не пройдёт валидацию.
На этой странице объясняется, что делал тег <center>, и, что важнее, показаны CSS-техники, которые его заменяют: text-align: center для строчного содержимого, margin: 0 auto для блочных элементов и Flexbox для центрирования как по горизонтали, так и по вертикали.
Тег <center> является устаревшим HTML-тегом и не поддерживается в HTML5. Оформление должно находиться в CSS, а не в HTML-разметке. Вместо него используйте CSS-техники, описанные ниже.
Концептуальное различие: строчное и блочное центрирование
Прежде чем выбрать технику, определите, что именно вы центрируете. Это наиболее распространённый источник путаницы.
- Центрирование строчного содержимого (текста, изображений, строчных элементов) внутри контейнера: используйте
text-align: centerна контейнере. Контейнер сохраняет полную ширину; смещается к центру лишь его содержимое. - Центрирование блочного элемента (
<div>,<section>, карточки) внутри родителя: используйтеmargin: 0 autoна самом блоке. Блок должен иметь ширину меньше родительской, иначе он уже занимает всю строку и центрировать нечего.
Кратко: text-align центрирует содержимое внутри блока; margin: auto центрирует сам блок.
Центрирование строчного содержимого с помощью text-align
Примените text-align: center к родительскому элементу. Размеры элемента не изменятся — центрируется только содержимое внутри него.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This text is aligned to the left.</p>
<p style="text-align:center">And this one is placed in the center.</p>
</body>
</html>Это прямая замена тега <center>, если вам нужно просто центрировать текст.
Центрирование блочного элемента с помощью margin: 0 auto
Чтобы горизонтально центрировать блочный элемент внутри родителя, задайте ему width и установите левый и правый отступы в auto. Браузер равномерно распределит оставшееся горизонтальное пространство по обеим сторонам.
margin: 0 auto — сокращённая запись «0 сверху/снизу, auto слева/справа». Под капотом устанавливаются одинаковые значения margin-left и margin-right равные auto.
width обязателен. Блочный элемент без явно заданной ширины по умолчанию занимает 100% ширины родителя, не оставляя свободного места для распределения отступов auto — поэтому ничего визуально не сдвигается. Как только элемент становится уже родителя, отступы auto центрируют его.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="margin:0 auto; width:50%; background:#eee;">
This block is centered horizontally.
</div>
</body>
</html>Обратите внимание: margin: auto центрирует только горизонтально — по вертикали блок он не центрирует.
Центрирование по обеим осям с помощью Flexbox
Когда нужно центрировать содержимое одновременно по горизонтали и вертикали, Flexbox — современный и надёжный выбор. Сделайте контейнер flex-контейнером, затем используйте justify-content: center для горизонтальной оси и align-items: center для вертикальной.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="display:flex; justify-content:center; align-items:center;
height:200px; border:1px solid #ccc;">
<p>This box is centered both horizontally and vertically.</p>
</div>
</body>
</html>Здесь display:flex превращает <div> в flex-контейнер, justify-content:center центрирует дочерние элементы по главной (горизонтальной) оси, а align-items:center — по поперечной (вертикальной) оси. Свойство height задано, чтобы было вертикальное пространство для центрирования.
Подробное руководство по этим свойствам и остальной модели раскладки смотрите в статье Полное руководство по Flexbox.
Как выглядел старый тег <center>
Только для справки — не используйте это в новом коде. Тег <center> применялся парно и центрировал всё между открывающим и закрывающим тегами:
<p>This text is aligned to the left.</p>
<center>And this one is placed in the center.</center>Современный эквивалент — просто <p style="text-align:center">…</p>, как показано выше.