CSS: Centrar nuestra web en el navegador.
Escrito por Marc | Archivado en Desarrollo web, Tips | 515 veces visto.
Continuando con la línea de la última entrada vamos a mostrar un código muy sencillo para conseguir que nuestra web o el contenido que queramos ya sea imagen, texto o contenido del tipo multimedia , lo podamos centrar en el navegador. Utilizando el código que seguidamente explicaremos conseguiremos un centrado horizontal y vertical sea cual sea la resolución de pantalla de los usuarios ya que si redimensionamos el navegador seguirá ajustándose al centro.
La base de este código reside en el posicionamiento absoluto y jugar con los margenes izquierdo y superior negativos. Echando mano de la calculadora tendrémos que sacar unos valores equivalentes a la mitad de las dimensiones del contenido que queremos centrar:
Por ejemplo un contenido de 500 x 450 pixels.
- La mitad del width -250px (margen negativo superior)
- La mitad del height -225px (margen negativo izquierdo)
Pasaremos a ver el código CSS y a comentarlo así quedará mucho mas claro. Tomaremos como base una capa con un width(ancho) de 500 pixels y un height(alto) 450 pixels.
-
#container {
-
width: 500px;
-
height: 450px;
-
position: absolute;
-
top: 50%;
-
left: 50%;
-
margin-top: -225px; /* La mitad del alto (width)*/
-
margin-left: -250px; /* La mitad del ancho (height) */
-
}
sencillo, no?
Gracias a los margenes que creamos alrededor de la capa container, y a la influencia del 50% en el top y el left conseguiremos que esta capa y todo lo que haya dentro de ella quede totalmente centrado en nuestra pantalla, sea cual sea nuestra resolución o la de los usuarios.
El código CSS implementado en el HTML:
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<title>CSS: Centrar nuestra web en el navegador.</title>
-
-
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1" />
-
-
<style type="text/css">
-
#container {
-
width: 500px;
-
height: 450px;
-
position: absolute;
-
top: 50%;
-
left: 50%;
-
margin-top: -225px; /* La mitad del alto (width)*/
-
margin-left: -250px; /* La mitad del ancho (height) */
-
background: #7a7a7a;
-
}
-
</style>
-
</head>
-
-
<div id="container">
-
El contenido de esta capa quedará totalmente centrado en el navegador....
-
</div>
-
</body>
-
</html>
Pues esto es todo, hasta aquí la clase del día, espero que os sea de gran utilidad (la verdad lo es, una vez te acostumbras a usarlo es dificil no incluir este código en el template de CSS básico).
Agradecer al administrador del blog de UniJimpe, de donde he aprendido muchas cosas y esta es una de ellas.
