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

В этой статье мы рассмотрим, как можно с помощью CSS настроить блок таким образом, чтобы он был по центру страницы. Мы покажем примеры и объясним, как использовать свойства, чтобы достичь желаемого результата.

Есть два основных способа поставить блок в центр по горизонтали и вертикали с помощью CSS. Первый способ заключается в использовании правила margin: 0 auto; с добавлением значений для ширины блока. Второй способ заключается в использовании position: absolute; с добавлением значений для ширины блока и добавления значений для left и top.

Способ 1: margin: 0 auto;

Для центрирования блока в CSS можно использовать значение margin: 0 auto;. Это присваивает блоку автоматически выставляемые поля по горизонтали. Кроме того, необходимо указать ширину блока. Для этого можно использовать правило width.

.block {
    margin: 0 auto;
    width: 400px;
}

В результате получается блок с шириной 400px и горизонтальным центрированием по центру страницы.

Способ 2: position: absolute;

Еще один способ центрирования блока заключается в использовании значения position: absolute;. Также можно указать начальные позиции по горизонтали и вертикали, а также ширину блока.

.block {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    margin-left: -200px;
    margin-top: -200px;
}

Этот код позволяет поставить блок в центр страницы. При этом значение left: 50%; смещает блок влево на половину от ширины блока, а значение top: 50%; смещает блок вверх на половину от высоты блока. Значения margin-left и margin-top отрицательные, что позволяет переместить блок еще на половину ширины и высоты.