Как выровнять блок по центру css
Чтобы выровнять блок по центру с помощью CSS, можно использовать следующие методы:
Центрирование по горизонтали. Для центрирования блока по горизонтали можно использовать следующий CSS код:
.container { width: 80%; margin: 0 auto; }
Где
.container
- это класс вашего блока. Ширина блока задается в процентах, а свойствоmargin
со значениемauto
автоматически центрирует блок по горизонтали относительно родительского контейнера.Центрирование по вертикали и горизонтали. Для центрирования блока как по горизонтали, так и по вертикали, можно использовать следующий CSS код:
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Где
.container
- это класс вашего блока. Свойствоposition: absolute
позволяет задать позиционирование относительно ближайшего позиционированного контейнера, свойстваtop
иleft
задают отступ сверху и слева соответственно, а свойствоtransform
с помощью функцииtranslate
переносит блок на половину его собственной ширины и высоты относительно начальной позиции, что центрирует блок как по горизонтали, так и по вертикали.
Существует несколько способов выровнять блок по центру относительно его родительского блока.
Например, можно воспользоваться технологией flex
.
Для этого у родительского блока укажем следующие CSS свойства:
display: flex;
justify-content: center;
align-items: center;
Свойство justify-content
отвечает за выравнивание элементов по главной оси (X), а align-items
- по поперечной (Y).