Как сделать по центру экрана css

Чтобы сделать элемент по центру экрана в 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».

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать по центру экрана css

Наш специалист свяжется с вами в ближайшее время и уточнит детали