Вертикальне центрування в CSS

CSS все ще заплутує більшість із нас: він має сотні властивостей із поганими назвами, кожна з яких може впливати на результат неінтуїтивно зрозумілим чином. Вертикальне розташування елементів у веб-розробці є складним і часто викликало головний біль у минулому. Але, на щастя, ті дні минули.


Важко повірити: у 2024 році тепер можна буде досягти бажаного результату одним рядком CSS:

0f1273b25d9806459716

0f1273b25d9806459716

У минулому люди використовували безліч інших варіантів для досягнення такого ж результату:

Flexbox

0f1273b25d9806459716

Абсолютне позиціонування

0f1273b25d9806459716

Вбудований блок

0f1273b25d9806459716

The Підтримка браузером align-content тепер дуже добре, і більше немає вагомих аргументів на користь використання застарілих методів. Для цього завдання вам більше не потрібен flexbox, а дочірній елемент (на відміну від наведеного вище прикладу) не повинен бути в окремому `<body>`. div бути включені. Дивно, що після десятиліть розвитку CSS тільки тепер має єдину властивість для керування вертикальним центруванням.

Назад