Как центрировать блок без фиксированных смещений
Размещаем содержимое по центру контейнера с помощью Grid и сохраняем возможность роста.
Задача и ограничения
Нужно поставить короткое сообщение по центру области, но не знать заранее его высоту. Ручные top, left и отрицательные отступы зависят от размеров текста. После перевода, увеличения шрифта или переноса строк такая конструкция часто смещается.
Пошаговое решение
Сделайте родителя grid-контейнером и задайте place-items: center. Это совместная настройка выравнивания по двум осям. Сам контейнер должен иметь свободное место: без высоты или min-height вертикальное центрирование может быть незаметным.
Для текстового сообщения ограничьте ширину, добавьте внутренние отступы и разрешите рост. Вместо жёсткого height выберите min-height, если содержимое может стать длиннее. Не применяйте absolute только ради центровки: он убирает элемент из обычного потока.
Код компонента
<style>
.stage { display: grid; place-items: center; min-height: 220px; padding: 20px; background: #edf3ef; }
.message { max-width: 30rem; padding: 24px; background: white; border-radius: 10px; text-align: center; }
</style>
<div class="stage"><div class="message"><h2>Всё готово</h2><p>Можно переходить к следующему уроку.</p></div></div>Что может пойти не так
Как проверить результат
- Увеличьте сообщение до трёх абзацев.
- Проверьте ширину около 360px.
- Увеличьте масштаб текста и убедитесь, что начало и конец доступны.
Разберите также: CSS Grid, минимальная высота.