Как отцентрировать div через абсолютные свойства?
Теги и их категории
Отцентрировать div через абсолютное позиционирование можно двумя способами: через `transform` или через `inset` и `margin: auto`.
С transform (размер неизвестен)
.parent { position: relative; }
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}top/left: 50% ставит левый верхний угол в центр, а translate(-50%, -50%) сдвигает элемент на половину его размера.
С inset и margin: auto (размер задан)
.child {
position: absolute;
inset: 0;
width: 200px;
height: 100px;
margin: auto;
}Нюансы
- Родитель должен быть позиционирован (
position: relative), иначе центрирование будет относительно страницы. transformс нечётными размерами иногда даёт размытие текста на полпикселя.- Для обычной раскладки проще
display: grid; place-items: centerу родителя.
Коротко для собеседования
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) или inset: 0; margin: auto с известными размерами; у родителя position: relative.
Подробнее: MDN — Центрирование элемента