Центрування елемента по горизонталі та вертикалі
Найнадійніший сучасний спосіб — 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 неможливий.