Em primeiro lugar, temos que entender o que significa automático, que preenche automaticamente o espaço restante.
Elemento de nível de bloco, mesmo se definirmos a largura, ele ainda ocupa uma linha por si só. Na especificação css, a margem externa esquerda do elemento + largura da borda esquerda + margem interna esquerda + largura do conteúdo + margem interna direita + borda direita + Margem direita = a largura do bloco que o contém. Se definirmos as margens esquerda e direita como automáticas, ele alcançará a distância restante igualmente, obtendo assim um efeito de centralização horizontal.
No entanto, a altura do elemento de nível de bloco não se expande automaticamente, de modo que seu tamanho externo não é preenchido automaticamente com o elemento pai e não há espaço restante. Portanto, configurar automaticamente para cima e para baixo na margem não pode atingir a centralização vertical.
Mas podemos alcançá-lo através do posicionamento + margem;
Mas se o elemento pai for o corpo, esse método não é viável.
<!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>