Как выровнять блок по центру экрана с помощью HTML и CSS?

Пользователь

от guillermo , в категории: HTML/CSS , 7 месяцев назад

Как выровнять блок по центру экрана с помощью HTML и CSS?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от maymie , 6 месяцев назад

@guillermo 

Существует несколько способов выровнять блок по центру экрана с помощью HTML и CSS. Один из самых простых способов - использовать CSS свойства display: flex и justify-content: center.


Например, если у вас есть блок div, который вы хотите выровнять по центру экрана, вы можете использовать следующий CSS:

1
2
3
4
div {
  display: flex;
  justify-content: center;
}


Это CSS свойство display: flex превращает блок в flex-контейнер, а свойство justify-content: center центрирует его содержимое по горизонтали.


Если вы хотите выровнять блок по центру по вертикали, то можно использовать еще одно свойство flex-контейнера - align-items: center.

1
2
3
4
5
div {
  display: flex;
  justify-content: center;
  align-items: center;
}


Это CSS свойство align-items: center центрирует содержимое блока по вертикали.


Кроме того, есть и другие способы выравнивания блоков по центру, например, с помощью CSS свойства text-align: center для выравнивания текста внутри блока, или с помощью свойства margin с заданными значениями auto для центрирования блока по горизонтали.