BONUS: Ejemplos típicos.
Estos son algunos ejemplos típicos sobre posicionamiento (centrado).
1.- Centrar div horizontalmente en la página (con position: relative
)
#centrado{
position: relative;
left: 0;
right: 0;
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
}
<div id="centrado"></div>
2.- Centrar div horizontalmente en la página (con position: absolute
)
#centrado{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
}
<div id="centrado"></div>
3.- Centrar div horizontalmente en la página (con position: static
, valor por defecto)
#centrado{
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
}
<div id="centrado"></div>
4.- Centrar div horizontalmente dentro de otro div
#contenedor{
position: relative;
height: 300px;
width: 300px;
background-color: green;
}
#centrado{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
}
<div id="contenedor">
<div id="centrado"></div>
</div>
5.- Centrar div horizontalmente y verticalmente en la página
#centrado{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 100px;
width: 100px;
background-color: red;
}
<div id="centrado"></div>
6.- Centrar div verticalmente y horizontalmente dentro de otro div
#contenedor{
position: relative;
height: 300px;
width: 300px;
background-color: green;
}
#centrado{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 100px;
width: 100px;
background-color: red;
}
<div id="contenedor">
<div id="centrado"></div>
</div>