Центрирование элемента по горизонтали и вертикали
Самый надёжный современный способ — flexbox на родительском контейнере.
Код
<div class="center-box">
<div class="centered">Я центрирован</div>
</div>
<style>
.center-box { display: flex; align-items: center; justify-content: center; height: 200px; background: #eee; }
.centered { padding: 1rem 1.5rem; background: #fff; border-radius: 8px; }
</style>
Предпросмотр
Пояснение
align-items центрирует по вертикали, justify-content — по горизонтали. Контейнеру нужна заданная высота (height или flex-контекст), иначе центрирование ничего не даёт.
- Через CSS Grid: display:grid; place-items:center; — ещё более короткая запись для того же результата.
- Через position:absolute + transform: translate(-50%,-50%) — более старый подход, полезен когда flex невозможен.