31Чтобы сделать элемент по центру экрана в CSS, можно использовать свойство «margin» и задать для него значения «auto» для отступов слева и справа, и «0» для отступов сверху и снизу.
Пример:
HTML:
<div class="center">
<h2>Заголовок</h2>
<p>Описание элемента, расположенного по центру экрана</p>
</div>CSS:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Здесь мы используем комбинацию свойств «position», «top», «left» и «transform» для вертикального и горизонтального выравнивания элемента по центру экрана.
Свойство «position: absolute» задает положение элемента относительно ближайшего родительского элемента с позиционированием, в данном случае — body.
Свойства «top: 50%» и «left: 50%» размещают элемент по указанным координатам — на середине экрана по горизонтали и вертикали.
Свойство «transform: translate(-50%, -50%);» используется для выравнивания элемента по центру относительно заданных координат, путем сдвига его на 50% от его собственной ширины и высоты влево и вверх.
Если же нужно выравнять элемент по центру горизонтали или вертикали, можно использовать только свойство «margin» со значениями «auto»:
.center {
width: 50%;
margin: 0 auto;
}Здесь мы задаем ширину блока равной 50% от ширины родительского элемента и используем свойство «margin: 0 auto» для выравнивания элемента по центру горизонтали. Если нужно выравнять элемент по вертикали, можно использовать свойство «position: absolute» и комбинацию свойств «top» и «transform».
