Centrar horizontalmente un objeto en pantalla, es una tarea sencilla. Pero, ¿y centrarlo verticalmente?. Mucha gente me había hecho esta pregunta y hoy he encontrado la solución en Unijimpe.
La idea es usar el posicionamiento absoluto y asignar como valores al margen izquierdo y superior, un valor negativo que será la mitad del tamaño del objeto que queramos centrar. Por ejemplo; si queremos centrar una imagen con un tamaño de 350×400, tendríamos que hacer lo siguiente:
1.- Creamos un estilo con los siguientes parámetros.
#center_object {
width: 350px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px; /* la mitad de alto que nuestro objeto */
margin-left: -175px; /* la mitad de alto que nuestro objeto */
}
2.- Finalmente, incluimos nuestro objeto dentro una etiqueta <DIV>:
<html>
<head>
<title>Mi objeto centrado</title>
<style type=“text/css”>
#center_object {
width: 350px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px; /* la mitad de alto que nuestro objeto */
margin-left: -175px; /* la mitad de alto que nuestro objeto */
}
</style>
</head>
<body>
<div id=“center_object”>
<img scr=“southdunker.gif” width=“350″ height=“400″>
</div>
</body>
</html>
Este es el ejemplo del resultado.
::–Dunker–::
Exelente, codigo y ejemplo funcionando.
Migración del Blog!!.
Como se puede ver en la home del blog, he cambiado de URL. Por favor, si queréis comentar algún post, hacerlo en la nueva dirección. http://blog.dunker.es
Gracias.