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;
}
