Siempre suele ser un dolor de cabeza centrar un DIV especialmente centrarlo verticalmente, en un post anterior expliqué como centrar los contenidos dentro de un DIV, veamos ahora como centrar el DIV.
Imaginemos que tenemos un DIV que mide 300px x 300px al cual para centrarlo le aplicaremos la clase center
[cc lang=»html»]
[/cc]
Nuestro código CSS sería
[cc lang=»css»]
.center {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
#midiv {
width: 300px;
height: 300px;
}
[/cc]
El truco es simple debemos establecer como márgenes la mitad del ancho y del alto de nuestro DIV o imagen que deseamos centrar
