Контакты

Заметки Веб-разработчика

Полезная информация для исполнителей и заказчиков

Как сделать Елемент полностью по центру? Центровка елемента по центру страницы или родительского блока

Часто у новичков появляется проблема при которой они не могут разместить определенный объект по центру страницы. Почему-то этот елемент хоть и ставится приблизительно по центру, однако немного смещен в правый нижний угол. Решение крайне простое!

Решение

Если вам нужно разместить елемент по центру какого либо блока, вам необходимо этому елементу добавить такие css стили:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Абсолютное позиционирование со значениями top: 50% и left: 50% переместит ваш елемент к центру относительно его родительского блока, а свойство transform: translate(-50%, -50%)
полностью откорректирует позицию елемента до нормального состояния.

Примечание. Если вам нужно центрировать елемент по центру самой страницы, а вы вдруг увидели, что ваш елемент никак не хочет перемещаться на центр экрана, тогда проверьте его родительский блок. Возможно у родительского блока присутствует свойство position: relative, absolute или fixed. Это значит, что елемент, который вы хотите центрировать, размещается по центру именно своего родительского блока, а не самого экрана, так как его родительский блок имеет одно из вышеперечисленных свойств. Уберите эти свойства у родительского елемента и все будет работать исправно.



Оставьте свой комментарий внизу