Webmaster Libre

.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: table; }

.centrado {
display: table-cell;
vertical-align: middle;
text-align: center; }

.contenido {
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid #000;}

.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;}

.contenedor[class] {
position: fixed;
display: table;}

.centrado {
position: absolute;
top: 50%;}

.centrado[class] {
display: table-cell;
vertical-align: middle;
text-align: center;
position: static;}

.contenido {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
top: -50%;}

14 Respuestas a “Centrado con CSS (2): Vertical”

Agrega tu comentario

1. Eugenio Martínez Sierra dice:

   4 julio 2006 a las 0:59

   Ahora que lo tenía casi conseguido…

   De todos modos, no sabeis lo útil que me es esto ahora mismo
2. noelmf dice:

   28 diciembre 2006 a las 14:39

   ¿Alguien sabe como se puede conseguir centrado vertical en ie7?

   Un saludo!
3. atomik dice:

   27 marzo 2007 a las 11:29

   Estos trucos estan muy bien, pero no funcionan en el Explorer 7. Una manera de solucionarlo es anidando una capa al 50% pero solo es una solución para contenidos pequeños.
4. Alma Fernández dice:

   27 marzo 2007 a las 13:34

   Habrá que investigar un poco, gracias por el apunte
5. Mendi dice:

   3 enero 2008 a las 13:38

   Muchas gracias Alma. Parece mentira que a estas alturas los navegadores no soporten el centrado vertical normalmente. Si es que al final nos obligan a usar tablas para algunas cosas…
6. Marco Nuñez G. dice:

   5 marzo 2008 a las 1:26

   ups no sabes lo que me ha costado realizar que esto funcione bien… pero el problema radica en cuando se exede los limites no se visualiza el contenido que sobre sale… en firefox no funciona bien y rarisimo que en IE si funciona…
   es extraño pero para eso no se cumple el estandar… ojala los navegadores evolucionen y se puedan leer este tipo de situacion.
7. sergiomas dice:

   24 mayo 2008 a las 20:51

   Yo he conseguido mi propio sistema para centrar una web con css, y funciona en IE5.5, 6, 7, y hasta 8beta, Firefox, Opera, Safari, …, tanto horizontal como vertical y sin que al redimensionar el navegador deje de ser accesible todo el contenido.
   Echadle un vistazo, a ver que os parece.
8. Antione dice:

   7 julio 2009 a las 16:17

   excelente demostración del trabajo que nos ahorraría saber meter una etiqueta table a tiempo
    
9. :) dice:

   15 septiembre 2009 a las 19:59

   Sergiomas, no has descubierto nada.
   El ejemplo de este tutorial es para un problema mucho más complejo que el que se resuelve en el enlace que has puesto.
10. Claudio dice:

    28 agosto 2011 a las 1:54

    Nunca voy a entender por qué no hicieron una propiedad para centrar verticalmente de una y sin tener que apelar a estos trucos. Por lo visto en CSS3 aún sigue siendo complicado, va no complicado, pero anti natural como sería horizontalmente. Si existe un lugar para hacer quejas al respecto sería bueno que todos lo hagamos con el fin que agreguen ciertas cosas que para los que hacen el código pueden ser obsoletas, pero no son ellos quienes diseñan las páginas…
11. z666zz666z dice:

    22 septiembre 2011 a las 11:07

    Bastante útil, pero tiene un problema…

    Si lo que se desea centrar verticalmente es una celda de una especie de tabla hace cosas raras en otras celdas…

    Cread una tabla de 4×4 de un tamaño el que se desee (75%,66%) o lo que se quiera…
    Cread dentro de la tabla sus cuatro filas, la tercera que coja el alto restante
    Cread dentro de la tabla sus cuatro columnas, la tercera que coja el ancho restante
    De este modo las celdas de las filas 1,2 y 4 no cambian de alto
    De este modo las celdas de la fila 3 cambian de alto al cambiar el tamaño de la ventana
    De este modo las celdas de las columnas 1,2 y 4 no cambian de ancho
    De este modo las celdas de la columnas 3 cambian de ancho al cambiar el tamaño de la ventana
    Y la celda 3,3 será tan grande como sea necesario

    Si a la celda 3,3 le metemos un div con display:block;width:100%;height:100%; y a ese div le aplicamos este truco… la leche, las otras celdas de la fila se dañan.

    La implementación que hacen los navegadores de <div stle=”display:table….”> es super chachi… lo que está fuera de esa tabla se puede ver influenciado por cualquier <div stle=”…vertical-aling:middle;….”> que esté en cualquier otra celda…

    Y cómo lo se? Facil… haciendo una trampa… poniendo en todas y cada una de las celdas otro par de divs anidados, uno con display:block y dentro de él otro con display:table… con el border a 2px dotted blue para ver los bordes… vaya chapuza de implementación de los navegadores…

    Si en height no se usa % sino un valor fijo entonces todo va bien, pero claro entonces el tamaño no cambia al cambiar el tamaño de la ventana, ni se auto ajustan al contenido, etc…

    De momento no he sido capaz de encontrar solución a este problema y mucho menos una que funcione en todos los navegadores.

    Si alguien haya alguna que me lo haga saber, por favor…

    Resumen: Intentad resolver el problema del centrado vertical no en el body directamente sino dentro de un div que simule una celda de una tabla de varias filas y columnas… al alinear verticalmente esa celda las de la misma fila se ven misteriosamente afectadas… y en cada navegador de forma diferente.
12. German dice:

    25 noviembre 2011 a las 17:38

    Hola, pues y lo que cambie fue la position fixed o fija por absoluta y me centro bien y ya me baja el scroll, espero solucione hasta el momento funciona.

Trackbacks/Pingbacks

1. Juglar :: Centrar :: August :: 2005 dice:

   24 agosto 2006 a las 20:45

   [...] Verticalmente: W3C: Centrar un bloque hicksdesign: vertical centering with CSS badboy.media.design: Vertical align with CSS Vertical centering using CSS Vertically Align Content in Body Vertical centering Vertical center Webmaster Libre » Centrado con CSS (2): Vertical [...]
2. Webmaster Libre » Archivo del weblog » Centrado con CSS (1): Horizontal dice:

   28 agosto 2006 a las 14:15

   [...] de 2006 a las 0:21 y está archivada en: Codigo, CSS. Puedes dejar un comentario, o enviar un trackback desde tusitio. [...]

Feed RSS de los comentarios de este post.