CSS
Centrado perfecto con CSS
17 de Enero del 2010 por b@cHo · Deja un comentario
Pues despues de buscar en muchos lados como conseguir un centrado en css perfecto independientemente de las resoluciones de pantalla sin resultado, he decidido compartir mi método, talves no el correcto pero si el practico.
Ahora bien, primero necesitamos algo que centrar, en este caso un Div con texto e imagen adentro:
<head> <title>Centrado perfecto con CSS</title></head> <body> <p>Este ejemplo se a probado en distintas resoluciónes mostrando el mismo resultado.</p> <div id="centrado"> <img src="http://kernelerror.net/editables/120x60.png" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur, turpis ac pharetra porttitor, nisi lorem lobortis lorem, a pellentesque diam neque at metus. Donec est purus, rhoncus vitae dapibus at, congue sit amet justo. Maecenas laoreet ullamcorper nisl, ac ultricies ligula faucibus in. Integer nec mauris lorem. Aliquam erat volutpat. Aliquam cursus tortor ut magna aliquam ultricies id a urna. Nunc eu mauris erat. Fusce varius egestas rhoncus. Pellentesque et leo purus. Nam sit amet mi mi. Nunc vulputate nibh egestas risus porta consectetur. Suspendisse vehicula eleifend feugiat. Etiam facilisis, tellus quis rutrum aliquet, eros ligula fringilla mi, eu lacinia dolor sapien a mauris. Pellentesque felis ligula, lacinia ac tempus id, elementum non neque. Praesent augue risus, pharetra nec faucibus varius, pharetra nec nibh. Quisque ipsum nunc, aliquam vulputate dapibus eget, suscipit eu libero. Etiam quam enim, aliquet id venenatis quis, pellentesque et nunc. Sed venenatis erat eu lectus vehicula eu scelerisque ligula scelerisque.</p> </div> </body>
Como peuden ver nada dificil, el truco esta en mantener el DIV con un id unico en la pagina (en este caso centrado)
Ahora el CSS
#centrado {
position:absolute;
width: 40%;
top: 50%;
left: 30%;
text-align:center;
}
Ahora bien, como peuden ver el truco es muy sencillo consiste simplemente en mantener una relacion de tal forma que el ancho del contenido centrado sea igual a la diferencia de dos veces “left” menos 100, esto significa que de un 100 % que representa el ancho de nuestra pantalla la dividiremos en 3 partes, de las cuales 2 son iguales (las de cada extremo, representadas una vez en el CSS bajo el nombre de left) y la del centro en donde va a ir el contenido ( representado en el CSS con width), de tal forma que quede en el centro mismo
una imagen para explicarlo:
Ahora bien, también se podria definir una altura, pero no me gustan los cuadrados pero si asi lo desean seria tan sencillo como agregar un css como este:
#centrado {
position:absolute;
width: 40%;
height: 40%;
top: 30%;
left: 30%;
text-align:center;
}
Y seria basicamente los mismo que la explicación anterior, pero ahora tambien aplicado verticalmente:
Y finalmente el ejemplo
