Para centralizar algo no centro da pagina existe várias técnicas.
Explicando o margin
sua função como observado é definir uma margem para algum elemento, e quando seu valor esta auto
quer dizer que o navegador irá definir a margem automaticamente, segue exemplo:
.quadrado{
background-color: red;
display: block;
height: 100px;
margin: 0 auto;
width: 100px;
}
<div class="quadrado"></div>
Observe que estou utilizando margin: 0 auto
o zero representa o margin-top
e o margin-bottom
, e o valor auto
representa o margin-left
e o margin-right
resumindo é uma abreviação.
No meu exemplo as margens da direita e esquerdas estão automáticas e com isso o navegador defini automaticamente seu posicionamento, e quando o elemento é um bloco com largura definida ele centraliza horizontalmente.
Para alinhar horizontalmente e verticalmente eu utilizaria esta técnica:
body, .container, html{
height: 100%;
}
.container{
display: flex;
align-items: center;
justify-content: center;
}
.quadrado{
background-color: red;
display: inline-block;
height: 100px;
width: 100px;
}
<div class="container">
<div class="quadrado"></div>
</div>
Obs. Quando você defini margin: auto
você esta atribuindo uma margin automática para top right bottom left