Cómo centrar un elemento horizontal y verticalmente en el navegador

0

Publicado el 10/05/2010 en Diseño por Alejandro Castillo

Experto en diseño, HTML/CSS, y encargado de las campañas de marketing online de Axtro. Con años de experiencia en el mundo del diseño, además de formar parte de nuestro equipo realiza cursos de formación en diseño.

Me ha sucedido varias veces que los clientes exigen como requisito que su página no presente un scroll hacia abajo, que todo suceda y transcurra en la misma pantalla. Si tras una acertada y fundamentada explicación no logramos sacarlo de su empeño, aquí les dejo la solución.

Alinear un div horizontalmente se utiliza con frecuencia: margin: 0 auto; El problema es cuando tenemos que aplicarlo verticalmente, porque el v-align no funciona para eso.

Lo primero es aplicarle al div que va a contener el contenido que queremos que aparezca centrado un ancho y alto fijo, así como un overflow: hidden; para que en caso de que dentro haya algún elemento con dimensiones superiores, este no se salga de su contenedor.

<div id=”main_content”>
      <!-- contenido -->
</div>

#main_content {
    width: 960px;
    height: 600px;
    overflow: hidden;
}

Se le añade position: absolute; con un top: 50%; y left: 50%; y veremos que el div asume como coordenada xy justamente el centro de la página.

Para corregir esto le damos un margin-top y margin-left negativo con un valor que sea la mitad de la altura y la mitad del ancho y ya está.

Ejemplo:

#main_content {
    width: 960px;
    height: 600px;
    overflow: hidden;
   
     position: absolute;
    top: 50%;
    left: 50%;

    margin-top: -300px;
    margin-left: -480px;
}

Compartir