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

@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 для центрирования блока по горизонтали.