Тег <center> (от английского center, «центр») когда-то был главным способом выровнять содержимое по центру: текст, картинки, таблицы и целые блоки. Он парный, закрывающий тег </center> обязателен, а собственных атрибутов у него нет. Сегодня стандарт HTML запрещает его использовать, а центрирование выполняют средства CSS. Браузеры тег пока понимают, поэтому он встречается в старых сайтах и шаблонах писем.
<center><p>Этот абзац выровнен по центру.</p></center>В этой статье
- Что делает тег center в HTML
- Почему тег center устарел и что покажет валидатор
- Чем заменить тег center: text-align, margin: 0 auto или Flexbox
- Атрибут align=center вместо тега center: p, div, img, table
- Чего тег center не делает: центр по высоте, Flexbox, внутри p
- Как убрать тег center со страницы и не потерять центрирование
Что делает тег center в HTML
Тег center выравнивает по горизонтали всё, что находится внутри него: строки текста, картинки, таблицы и блоки с заданной шириной. Для браузера это обычный блок на всю ширину родителя, как у <div>, только с выравниванием по центру.
Центрирование наследуют вложенные абзацы, заголовки и списки, поэтому одним тегом можно собрать по центру целый фрагмент страницы. Блок без заданной ширины и так занимает всю строку, сдвигать в нём нечего, а блок шириной 120 пикселей встаёт в середину. Смыслового значения у тега нет: для вспомогательных технологий это такая же обёртка, как div.
Пример: что центрирует тег center, а что оставляет слева div
Тег center сдвигает к середине и строку, и картинку, и таблицу, и блок шириной 120 пикселей. Такой же div оставляет всё у левого края.
Почему тег center устарел и что покажет валидатор
Тег пришёл из ранних браузеров Netscape, и спецификация HTML 3.2 включила его из-за широкого распространения (описание в HTML 3.2). В HTML 4.01 его объявили устаревшим и приравняли к записи <div align="center"> (описание в HTML 4.01).
Современный стандарт относит center к тегам, которые авторам использовать нельзя, и предлагает взять подходящие элементы или CSS (список устаревших возможностей WHATWG). Браузеры при этом продолжают его выводить ради старых страниц. Проверка кода сообщает об ошибке для каждого такого тега:
Error: The “center” element is obsolete. Use CSS instead.Если center находится внутри абзаца, к этой ошибке добавляется вторая, про лишний закрывающий тег p. Причина описана в разделе про то, чего тег не делает.
Чем заменить тег center: text-align, margin: 0 auto или Flexbox
Единой замены нет, способ зависит от того, что нужно центрировать. Текст и строчное содержимое выравнивает свойство text-align: center у родителя, блок с заданной шириной центрирует margin: 0 auto у самого блока, а группу элементов собирает по центру display: flex с justify-content: center.
<p class="line">Текст по центру</p>
<div class="box">Блок шириной 120px</div>
<div class="group">
<span>Первый</span>
<span>Второй</span>
</div>.line { text-align: center; }
.box { width: 120px; margin: 0 auto; }
.group {
display: flex;
justify-content: center;
gap: 8px;
}Блок для такого приёма обычно делают тегом div, а таблицы разобраны на странице про тег table. Как работает сам text-align: center, разобрано в уроке курса «Что на самом деле центрирует text-align: center».
Пример: какой способ центрирует какое содержимое
Кнопки меняют содержимое сразу во всех четырёх рамках. Под рамкой написано, куда оно встало, а внизу собран итог.
В итоге видно главное. Свойство text-align: center у родителя не сдвигает ни таблицу, ни блок с шириной, margin: 0 auto не действует на текст и картинку, а блок без ширины в обычном потоке и так занимает всю строку: сдвинуть его можно, только сделав уже строки: через width: fit-content с margin: 0 auto или через Flexbox у родителя. Тег center справлялся с текстом, картинкой, таблицей и блоком с шириной сразу, поэтому замена одним свойством не всегда равна старому поведению.
Атрибут align=center вместо тега center: p, div, img, table
Те же задачи решал атрибут align у других старых тегов, например <p align="center">. Проверка кода отмечает align на p, div, h2, img и table предупреждением, что атрибут устарел, и советует CSS.
Действует он по-разному. На абзаце, div и заголовке выравнивает текст, на таблице двигает весь блок таблицы, а у картинки (тег img) значение center по горизонтали ничего не меняет и задаёт только положение рядом с текстом. Браузер учитывает align и у самого center, хотя в стандарте такого атрибута нет: со значением right текст уходит вправо.
Пример: как атрибут align ведёт себя на разных тегах
Первый ряд кнопок выбирает тег, второй задаёт значение align. Под рамкой написано, где оказалось содержимое: у картинки значение center меняет только вертикальное положение рядом с текстом.
Безопасно заменяется только выравнивание текста: align превращается в text-align. Таблицу центрирует margin: 0 auto, а картинку, которая считается строчным элементом, центрирует text-align: center у родителя. Вертикальное положение картинки рядом с текстом задаёт vertical-align: middle.
Чего тег center не делает: центр по высоте, Flexbox, внутри p
Тег center работает только по горизонтали и только пока остаётся обычным блоком. По высоте он ничего не центрирует, свойство display: flex отключает его выравнивание, а внутри абзаца тега p он не может находиться: браузер закрывает абзац раньше.
Пример: три случая, где center не помогает
Вкладки переключают три случая: высота, Flexbox и вложенность в p. Результат записан в строке под рамкой, а в третьей вкладке видна разметка, которую собрал браузер.
Абзац p принимает только строчное содержимое, поэтому span и strong в нём остаются, а center и div браузер выносит наружу и создаёт лишний пустой абзац. Центр по высоте задаёт родитель: display: flex вместе с align-items: center.
Как убрать тег center со страницы и не потерять центрирование
Заменять center нужно так, чтобы сохранилось всё, что он делал. Самый надёжный вариант: превратить тег в div с классом и описать центрирование в CSS.
<div class="center">
<h3>Заголовок</h3>
<p>Текст абзаца</p>
<table>
<tr><td>A</td><td>B</td></tr>
</table>
</div>.center { text-align: center; }
.center > table,
.center > div {
margin-left: auto;
margin-right: auto;
}Такая запись повторяет center для прямых потомков: текста, картинок, таблиц и блоков с шириной. Вложенный блок внутри блока она не охватывает, ему нужен собственный margin: 0 auto. Если просто удалить тег, всё сразу уйдёт к левому краю.
На странице с десятками таких тегов замену можно выполнить скриптом, но скрипт меняет только страницу в браузере посетителя, а исходный код остаётся прежним, поэтому для постоянного решения нужно править сам HTML.
document.querySelectorAll('center').forEach(function (old) {
var box = document.createElement('div');
box.className = 'center';
box.append(...old.childNodes);
old.replaceWith(box);
});Пример: что происходит с центрированием при разных заменах
Вторая кнопка убирает тег без замены, и всё уходит влево. Правило text-align возвращает заголовок и абзац, а таблица встаёт на место только после добавления margin.
Частые ошибки с тегом center
Чаще всего центрирование не получается там, где тег заменили одним свойством CSS.
| Ошибка | Что получается | Как исправить |
|---|---|---|
Блок с шириной центрируют через text-align: center у родителя | Текст внутри блока выровнен, а сам блок остаётся у левого края | Задать блоку margin: 0 auto |
Оборачивают таблицу в div с классом и text-align: center | Таблица остаётся слева | Добавить таблице margin-left: auto и margin-right: auto |
Прописывают margin: 0 auto блоку без ширины | Ничего не меняется, блок занимает всю строку | Задать блоку width или max-width |
Записывают center внутрь абзаца <p> | Браузер закрывает абзац раньше, получается лишний пустой p, а проверка кода сообщает о лишнем </p> | Вынести center из абзаца или выровнять сам абзац через text-align: center |
| Ждут центрирования по высоте | Содержимое остаётся у верхнего края | Задать родителю display: flex и align-items: center |
Пишут <img align="center">, чтобы сдвинуть картинку по горизонтали | Картинка остаётся слева, меняется только положение рядом с текстом | Задать родителю text-align: center |
Не пишут закрывающий </center> | Центрирование действует до конца родителя | Закрыть тег или заменить его на div с классом |
