Центрирование элемента с помощью CSS: абсолютное позиционирование против относительного позиционирования

При попытке центрировать элемент с помощью CSS вы можете столкнуться с проблемой где поля слева: авто и поля справа: авто кажутся неэффективными с положением: абсолютным. Однако эти поля работают, когда применяется позиция: относительная.

Эта разница связана с тем, как позиция: абсолютная удаляет элемент из обычного потока документов и размещает его в соответствии с предоставленными координатами. В этом контексте установка полей в значение auto не имеет никакого эффекта, поскольку не существует «родительского» элемента, относительно которого можно рассчитать поля.

С другой стороны, позиция: относительная сохраняет позицию элемента в нормальном потоке страницы. . Таким образом, поля «margin-left: auto» и «margin-right: auto» можно использовать для центрирования элемента относительно содержащего его элемента.

Чтобы центрировать элемент по горизонтали с использованием абсолютного позиционирования, вы можете установить ширину элемента, расположить его. к левому и правому краям родительского контейнера, используя левую и правую стороны, и установите верхнюю и нижнюю позиции для центрирования элемента по вертикали.