Hace algún tiempo tuve la necesidad de centrar el diseño de una pagina web horizontal y verticalmente, al principio fue bastante darle una solución hasta que encontre la información necesaria.
Para empezar en nuestro HTML debemos colocar el objeto a centrar dentro de un div con id=”contenido” y en nuestra hoja de estilos darle los siguientes atributos a nuestro div
#contenido{
margin-top: -175px; /* la mitad del alto del objeto a centrat */
margin-left: -250px; /* la mitad del ancho del objeto a centrar */
position: absolute;
top: 50%;
left: 50%;
width: 500px; /* ancho del objeto a centrar */
height: 350px; /* alto del objeto a centrar */
}
Con esto nuestro contenido ya se encontrará centrado en forma vertical y horizontal.
