Contacta (+34) 622 045 404

Estudio de desarrollo front-end, maquetación web, diseño y programación WordPress freelance.

Fundado por Alberto Fortes, diseñador y maquetador web HTML5 responsive design, front-end developer JavaScript y programador WordPress freelance a medida desde 2006.

Especializados en outsourcing con importantes clientes finales.

Cómo centrar verticalmente (y horizontalmente) un bloque (texto, imagen…) en una página o dentro de otro bloque

1 Diciembre, 2006

Hasta ahora para centrar verticalmente un bloque (texto, imagen…) a mitad de página o dentro de otro bloque se solía dar a este bloque una posición absoluta al 50% del top y darle a su vez un margen top negativo exacto a la mitad de su altura.
En código:

img{
   position:absolute; 
   top:50%; 
   margin-top:-92px;
}

El resultado, imaginando que el cuadrado amarillo pos it es la página:

ruby mola
Nota: para centrarlo horizontalmente, la técnica es la misma, le damos left:50% y margin-left negativo igual a la mitad de la anchura

Esto nos viene al pelo en este caso (bloques determinados dentro de la página), pero hay veces que cuando lo hacemos a página completa podemos tener algún problemilla. Para esto Matthew J Tretter acaba de sacar una solución más sofisticada.
Consiste en añadir un bloque que empuje al bloque que queremos centrar, ya que a veces tenemos problemillas si la pantalla es muy pequeña:

body {
   height:100%;
   margin:0;
   padding:0;/*de rigor*/
   /*asegurate de que está forzada al 100% para prevenir*/
}
#la_que_empuja {
   width: 100%;
   height: 50%;
   margin-top: -92px;
   /*de nuevo la mitad de la altura del bloque a centrar*/
}
#la_empujada{
    position: relative;
    top: -50px;/*mitad otra vez*/
   width:135px;
   height:185px;
}

Ahora bien, esto lo recomendaría sólo para cuando la técnica anterior te diera problemas. De hecho este apaño de exanimo.com es para páginas completas y no bloques, por lo que en el caso del ejemplo anterior nos daba multitud de problemas.