Centrar una Página Web

La manera más sencilla de centrar una página web es usando CSS, y una serie de tags div. A continuación, se explicará como se hace esto, y se proporciona el código necesario para centrar una web.

Paso 1: Crear estructura

Primero crearemos el cuerpo principal de la página web:

<div id="todo">
<div id="contenido"><center>Este es el cuerpo de la página centrada</center></div>
</div>

El contenedor todo será el principal, adentro de este estará el contenido de nuestra página Web.

Paso 2: Usar CSS para centrar el DIV

Agregaremos ahora el CSS, con el cual centraremos el contenedor contenido.

#todo{
position: absolute;
left: 50%; /* Comenzará a la mitad de la página */
margin-left: -450px;   /* Es la mitad del ancho de todo el contenido */
}

#contenido{
background-color: yellow; /* amarillo para poder notar la diferencia */
width: 900px;   /* ancho del contenido */
text-align: left;
}

Lo que el CSS está haciendo es posicionando el contenedor todo a la mitad de nuestra pantalla (50%), pero luego debido al margen negativo, el cual es la mitad del ancho total de nuestra página web, se posicionará a la izquierda, mostrando que el contenedor contenido está centrado.

Por otro lado, te recomiendo que leas esta otra forma de centrar una página web que es un poco más simple y directa.

Si te sirvió, ¡compártelo!

También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público.


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.