To center something in the center of the page there are several techniques.
Explaining margin
its function as observed is to define a margin for some element, and when its value is auto
it means that the browser will set the margin automatically, following example:
.quadrado{
background-color: red;
display: block;
height: 100px;
margin: 0 auto;
width: 100px;
}
<div class="quadrado"></div>
Note that I am using margin: 0 auto
zero represents margin-top
and margin-bottom
, and auto
represents margin-left
and margin-right
is an abbreviation.
In my example the right and left margins are automatic and the browser automatically sets its positioning, and when the element is a block with defined width it centers horizontally.
To align horizontally and vertically I would use this technique:
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. When you set margin: auto
you are assigning an automatic margin to top right bottom left