Почему центрирование стало задачей для ухищрений

Современная страница может поставить блок в центр несколькими понятными правилами. Но в ранних версиях CSS не было одного простого и надёжного способа расположить любой элемент точно посередине экрана — особенно одновременно по горизонтали и вертикали. Разработчикам приходилось собирать решение из свойств, созданных для других задач, и учитывать различия между браузерами.

Например, `float` изначально нужен был, чтобы текст обтекал изображение или другой элемент. Он прижимает блок к левому или правому краю, а не центрирует его. Поэтому для нужного результата могли сочетать плавающие элементы с дополнительными отступами, позиционированием или правилами, подгоняющими страницу под конкретный браузер и размеры блока. Такие обходные комбинации и называли хаками.

Почему одного рецепта не хватало

Центрирование по горизонтали и по вертикали — разные задачи. Блок фиксированной ширины можно было, например, поместить по центру горизонтально с помощью автоматических внешних отступов. Но чтобы вычислить вертикальное положение, часто требовалось знать высоту блока и доступного пространства. Если содержимое менялось, росло или переносилось на новую строку, прежние расчёты могли перестать работать.

Плавающие элементы тоже создавали побочные эффекты: текст начинал их обтекать, а родительский контейнер мог неверно учитывать их высоту. Приходилось добавлять правила, чтобы восстановить ожидаемое поведение. В итоге «центрирование» было не одним действием, а цепочкой компромиссов между разметкой, содержимым и поддержкой браузеров.

Что изменилось

По мере развития CSS появились более подходящие инструменты для построения макетов, в том числе Flexbox и Grid. Они позволяют выравнивать элементы без превращения `float` в универсальный инструмент компоновки. Старые приёмы важны не потому, что были изящными, а потому, что показывают цену ограниченных возможностей: достаточно изменить размер окна или содержимое блока — и хрупкая подгонка могла съехать с центра.