Прежде всего, мы должны понять, что означает авто. Авто автоматически заполняет оставшееся место.
Элемент уровня блока, даже если мы установим ширину, он все равно занимает строку сам по себе. В спецификации css левое внешнее поле элемента + ширина левой границы + левое внутреннее поле + ширина содержимого + правое внутреннее поле + правая граница + Правое поле = ширине содержащего блока.Если мы установим его левое и правое поля на авто, он достигнет оставшегося расстояния одинаково, таким образом достигнув эффекта горизонтального центрирования.
Однако высота элемента уровня блока не увеличивается автоматически, поэтому его внешний размер не заполняется автоматически родительским элементом, и в нем не остается места.Поэтому установка автоматического увеличения и уменьшения поля не может обеспечить вертикальное центрирование.
Но мы можем добиться этого с помощью позиционирования + маржа;
Но если родительский элемент является телом, этот метод невозможен.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
position: relative;
background-color: pink;
}
.box div {
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>