Ya hemos visto como centrar un div horizontalmente, los margenes laterales se adaptan automáticamente a la ventana del navegador independientemente de la anchura de la ventana. hacer lo mismo verticalmente no es tan sencillo. Desgraciadamenete la propiedad margin: auto no funciona tal y como se espera para los márgenes verticales y la página no se muestra centrada. Requiere de unos cálculos previos y esto es lo que haremos aquí, ver cuales son estos cálculos. Normalmente no será necesario centrar verticalmente ya que el contenido de la web suele ser mayor que la altura de la ventana.
La única forma que tenemos de centrar verticalmente es con posicionamiento absoluto, es decir, es necesario conocer las medidas del contenedor de nuestra web. Esto normalmente lo sabremos siempre que queramos. Aquí veremos como centrar vertical y horizontalmente un div
Este es el código que necesitamos
position: absolute; left: 50%; top: 50%; width: 300px; height: 200px; margin-top: -100px; margin-left: -150px;
Vamos a ver que hace este código:
Partimos de siguiente situación de un div dentro de nuestra web:
Aplicamos:
position: absolute; left: 50%; top: 50%;
Y tendremos la siguiente imagen
En este punto casi lo hemos conseguido, solamente nos falta poner que centro de las lineas discontinuas rojas coincidan con el centro de las lineas discontinuas negras. En este caso nos ayudaremos de la propiedad marging-top y marging-left a las que podemos dar el valor que queramos, incluso un valor negativo. Recordamos que el ancho de nuestro div es de 300px, por lo cual tengo que desplazar hacia la izquierda la mitad de esa cantidad, que seran 150px, el simbolo negativa nos indica que me desplazo hacia la izquierda
margin-left: -150px;
Lo mismo nos ocurre con la altura, tengo que deplazar hacia arriba la distancia de 100px, que es la mitar de la altura de nuestro div, con lo cual tendré
margin-top: -100px;
Por último, una vez aplicado lo anterior, como resultado tendremos centrado verticalmente y horizontalmente nuestro div
Como resultado final, el código de todo esto será (he añadido un color de fondo para mejorar la visibilidad):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.centrar {
background-color: #FF9;
overflow: hidden;
position: absolute;
height: 200px;
width: 300px;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -150px;
}
</style>
</head>
<body>
<div>Colocar aquí el contenido de la nueva etiqueta Div</div>
</body>
</html>
En las siguientes imágenes puedes ver como sería todo este trabajo desde Dreamweaver:
Sin Comentarios