Todos aquellos que se dedican al diseño web, una vez que otra se han encontrado con el problema de tener una web de unas dimensiones absolutas concretas (tanto de altura como de anchura) y no tener una manera fácil de poderla centrar vertical y horizontalmente en la ventana del navegador sea cual sea su tamaño.
Vamos a explicar una solución sencilla y la iremos explicando paso por paso para que quede clara y aparte de poder aplicarla sepamos el porque de cada paso.
1. En primer lugar, por el tipo de operaciones que realizaremos, necesitaremos que el posicionamiento de los objetos sea absoluto (ya iremos viendo el porque), así que lo primero será:
div {
position: absolute;
}
2. En segundo lugar, queremos encontrar el centro de la ventana del navegador, pero como las dimensiones del navegador variarán en cada caso dependiendo de la pantalla del usuario, si dicho navegador esta maximizado o no, las barras de estado que tenga el usuario, etc, tenemos que buscar ese centro con medidas relativas, así que lo que haremos sera más o menos:
div {
position: absolute;
top: 50%;
left: 50%;
}
3. Ya tenemos el centro del navegador definido, ahora nos falta centrar en el, nuestro objeto, en este caso, una capa (div) con unas dimensiones de 600 pixels de ancho por 400 pixels de alto, así que lo primero de todo será definir estas medidas en nuestro css.
div {
position: absolute;
top: 50%;
left: 50%;
width: 600 px;
height: 400px;
}
4. Con todo eso definido ya solo nos queda marcar el punto central de la capa (div), y eso lo conseguiremos con la propiedad de capa margin. Como ya dijimos en su día, los valores para margin pueden ser muchos, entre ellos, negativo, así que lo que necesitamos para centrar nuestra capa en el centro del navegador es decirle al css justamente la mitad del ancho y del alto de la capa para que así el punto central que hemos definido en el segundo punto sea donde se acomode el centro de la capa que tenemos y eso quedaría más o menos así:
div {
position: absolute;
top: 50%;
left: 50%;
width: 600 px;
height: 400px;
margin-top: -200px;
margin-left: -300px;
}
Para concluir el tutorial, aquí todo el código comentado, para que sea aún más fácil.
div {
position: absolute;
top: 50%; /* Buscamos el centro horizontal (relativo) del navegador */
left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
width: 600 px; /* Definimos el ancho del objeto a centrar */
height: 400px; /* Definimos el alto del objeto a centrar */
margin-top: -200px; /* Restamos la mitad de la altura del objeto con un margin-top */
margin-left: -300px; /* Restamos la mitad de la anchura del objeto con un margin-left */
}
Fuente: http://www.ateneupopular.com/tutoriales/tutorial-centrar-una-web-con-css/
