Uno de los problemas típicos es centrar horizontalmente y verticalmente contenido HTML utilizando CSS. Esto por que no es fácil conseguir posicionar verticalmente un elemento. Este truco lo leí en algún lugar pero lamentablemente no recuerdo donde así que me disculpo con el autor original de este método.
Centrando con CSS
La idea básica es utilizar posicionamiento absoluto y ubicar primero el contenido en el medio de la pantalla, luego le asignamos margen superior e izquierdo negativos en cantidades equivalentes a la mitad de las dimensiones del contenido que deseamos centrar. Luego si tenemos una imagen de 300×236 pixels de dimensiones tendríamos el CSS de la forma:
#main {
width: 300px;
height: 236px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -118px; /* 50% del alto*/
margin-left: -150px; /* 50% del ancho */
}
Luego, incluimos la imagen dentro de un div llamado main, unimos el código y obtenemos la forma completa para el centrado.
<html>
<head>
<title>Centrar con CSS - unijimpe</title>
<style type="text/css">
<style type="text/css">
#main {
position: absolute;
top: 50%;
left: 50%;
margin-top: -118px;
margin-left: -150px;
width: 300px;
height: 236px;
}
</style>
</head>
<body>
<div id="main">
<img src="screenshot.png" width="300" height="236">
</div>
</body>
</html>
Pueden ver el resultado de este ejemplo en: css-center-img.html.
Centrar SWFs con CSS
Podemos utilizar la misma técnica de centrado, para ello si utilizamos SWFObject, tendríamos el siguiente código al insertar un swf con dimensiones de 231×132 pixels.
<html>
<head>
<title>Centrar con CSS - unijimpe</title>
<script src="swfobject.js" type="text/javascript"></script>
<style type="text/css">
#main {
width: 231px;
height: 132px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -66px;
margin-left: -115px;
}
</style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
var so = new SWFObject("7762.swf","id","231","132","9","#FFF");
so.write("main");
</script>
</body>
</html>
Podemos ver el resultado en css-center-swf.html. Como ven muy sencillo y ademas es compatible con la mayoría de navegadores.
Comentarios Total 10 comentarios
Publicado: 09/12/2007 10:34 pm
Bonita aplicación de centrado por margenes negativos, es crossbrowser?
Publicado: 10/12/2007 7:51 am
yo hago una tabla con 100% de alto y 100% de ancho y luego en el td valign=middle y align=center y ahi pongo lo que quiera(imagen,iframe,otra tabla, …).
(creo que el height=100% no funciona en ie pero no estoy seguro)
es un sistema algo cutre y basico pero a mi me funciona
Publicado: 10/12/2007 1:52 pm
Yo si recuerdo de donde es este tip.
http://www.cristalab.com/tips/46147/centrar-un-elemento-horizontal-y-verticalmente-con-css
Publicado: 10/12/2007 10:18 pm
Te puedo asegurar que no es de allí mi estimado +Otaku Rzo+, era de una página en ingles la cual leí hace mucho tiempo cuando estaba desarrollando un proyecto y de allí lo recuerdo.
Publicado: 12/12/2007 1:30 pm
Yo recuerdo haberlo visto en un foro, pero unjimpe se toma la molestia de hacer un ejemplo y explicarlo thx
Publicado: 08/05/2008 12:34 am
El problema del ejemplo es que no es dinamico, solo sirve para una imagen de tamaño determinado :( Es decir, que si queres aplicar el mismo style a diferentes imagenes para centrar, sale cualquier cosa :S
Publicado: 19/12/2008 3:06 am
Hi
As a fresh blog.unijimpe.net user i just want to say hello to everyone else who uses this forum 8-)
Publicado: 17/04/2009 3:16 am
[…] http://blog.unijimpe.net/centrar-contenido-con-css/ Posted by jcmartinez | […]
Publicado: 18/07/2009 10:15 am
Hola, como podria centrar mi web como lo hace esta pagina, que alcambiar la resolucion siempre quede centrada,ya que sucede que mi pagina la muestra alineada a la izquierda.
si pudieras darme una ayuda .
gracias
Publicado: 23/03/2011 5:21 am
Muy buena la info, gracias