Centrado Vertical con CSS (actualizado)

12/ene/2007 51

(Ver actualización)

Una buena razón por lo que muchas personas defienden el uso de tablas para la diagramación de contenidos de un sitio web, es porque éstas permiten el correcto centrado horizontal y vertical de los elementos contenidos dentro de sus celdas. La propiedad vertical-align no es soportada por los browsers actuales, y va a ser lanzada con CSS3.0 (junto con muchas otras bien interesantes). Pues, a continuación les presentaré un método donde se utiliza efectivamente vertical-align, junto a un atributo poco utilizado de display y un hack para IE, como siempre necesario.

Antes que nada, necesitamos que nuestra superficie esté definida, en este caso al 100% de la pantalla (sin scroll). Esto lo logramos con height: 100% en 2 partes: el html y el contenedor de lo que queremos mostrar:

html, body {
     margin: 0;
     padding: 0;
     height: 100%;
}
#container {      display: table;      height: 100%;      width: 100%;      margin: 0; }

Nuestro poco utilizado display: table; lo que hace es dejar nuestro #container compacto, tal como nuesto viejo amigo

. Dentro de #content puedes encontrar display: table-cell; que se comporta tal como una celda dentro de una tabla (en este caso, #content sería una celda dentro de la tabla #container). Y es por este comportamiento de tablas que vertical-align entra en acción:

#content {
     display: table-cell;
     vertical-align: middle;
     position: relative;
}

Para finalizar el hack para IE, donde se centra #container pero con porcentajes:

/* \*/
 * html #content {
     top: 50%;
     left: 0;
     height: 1px;
}
* html #content #inner {
     position: relative;
     top: -50%;
}
  /* */

Ver código funcionando


Actualización:

Dado la llegada de IE7, a través de comentarios en este artículo (a los cuales les agradezco mucho su preocupación) me hicieron saber que este método de centrado vertical no funcionaba correctamente en este browser. Por lo tanto, investigando, me topé con un mejor método, que con los que he probado funciona a la perfección.

Ver código 2 funcionando

Más sobre display:

Gracias a 456bereastreet.

Comentarios

  1. Pedro Blanco [#]

    Tiene buena pinta, haber si cuando termine los examenes me pillo un hosting y me fabrico un Themes chulo, y asi aprendo CSS un poco…

    Saludos y gracias por el post;)

  2. Pancho [#]

    Sabes cuáles son las correcciones que sufrió IE 7 en la decodificación de sitios?
    Fuera de las imágenes PNG, los siitos que se veían mal con IE6, se me siguen viendo horribles en el 7
    XD

  3. AraDaen [#]

    Buen trabajo, pero tal como está no funciona en ie7, ya que por un lado no cumple con los standares como su hermanito menor, y por otro, aunque el codigo con porcentajes si funciona, no lo interpreta correctamente al no soportar el star hack.

    para que rule basta con utilizar comentarios condicionales:

    #content {
    top: 50%;
    left: 0;
    height: 1px;
    }

    #content #inner {
    position: relative;
    top: -50%;
    }

    Tal y como esta puesto, ya no sería necesario el star hack para el ie6 pues el condicional ya lo incluiría también.

    Un saludo.

  4. CSSLab Admin [#]

    Buen punto AraDæn, he estado utilizando un monton Comentarios Condicionales y deberia de aplicarlo YA en mis posts. Lo complementare, saludos y nuevamente gracias.

  5. AraDaen [#]

    Gracias a ti por tus experimentos, y publicarlos 😉

    Un saludo.

  6. Pacheco [#]

    Por desgracia tampoco se ve correctamente en IE7. Si que es cierto que no se queda pegado arriba del todo, pero al redimensionar la ventana no funciona igual que FireFox o IE6…
    He estado trasteando con los porcentajes, pero o es la solución, ya que lo que se arregla para una dimensión, se estropea para otra…

    ¿Es posible que IE7 llegase a funcionar correctamente? ¿O acaso soy demasiado iluso :)?

    Saludos y gracias de antemano.

  7. Alberto Lucas [#]

    vaya…con IE7 no va…. con la buena pinta que tenia :S

  8. Pacheco [#]

    SOBRE LA VERSIÓN 2.
    Esta actualización funciona en IE7, pero no es igual que la versión anterior… Aquí tienes que conocer la altura de la caja. Con eso, es relativamente sencillo centrar verticalmente. Lo bueno era el método anterior, totalmente dinámico. ¿Qué pasa con las plantillas en el que texto aumenta o disminuye? La versión anterior era sencillamente espectacular. Lástima que este híbrido entre IE6 y FireFox sea tan inestable… Quizá una nueva versión del IE7 solucione este problema. Si encuentro la solución, no dudéis que la comunicaré de nuevo. Mientras tanto, el Mr. Microsoft seguirá jodiendo a los defensores de los estándares… :)
    Gracias por todo,
    Pacheco.

  9. roger vicente [#]

    Buenas, he visto tu web y la verdad es que la funcion javaScript que les has puesto es bastante fina, aunque mejorable. Si quieres podemos compartitr algunoos de tus archibos y mejoramos el funcionamiento con flashes intercalados.

    La verdade es que esta fina pero me gustria poder ver los archibos fuente parar modifcar alguna coss.

    Gracisa

    Open our maind

  10. Vlad [#]

    Hola! Gracias por tu ayuda… lamentablemente sigo en busqueda de una solución CSS pura para solucionar este problema, dejandome tener contenido vertical fluido y que funcione en la mayoria de browsers, en especial Ie7, ie6 y FF. Si se te ocurre algo por favor dejame saber, grax!

  11. taarq [#]

    Me parece muy interesante y útil este experimento, pero me planteo una duda con lo de IE 7. El script es para IE en general, y sabemos que IE7 ha mejorado un poco la interpretación del modelo de cajas respecto a sus antecesores, de forma que si se introducen los hacks en un comentario condicional para IE 6 e inferior, sería posible que se viera bien en IE 7? No lo he podido probar porque no tengo IE7 aún. Lo dejo en el aire y si puedo hacer pruebas te comento…
    Thank´s ;D

  12. taarq [#]

    Vaya, me extrañaba no ver los comentarios, no los había leido por eso, con lo cual mi otro comentario es un poco obsoleto, perodón…

  13. wiinigo [#]

    Como ya preguntan en los comentarios. ¿Hay forma de hacerlo sin conocer la altura de los bloques?
    Yo intento alinear verticalmente un texto en un div y no hay forma. La idea es que se comporte igual que valign=’middle’ de las tablas.
    ¿Alguna idea?

  14. Carlos Sánchez [#]

    Bueno chicos, solucionado lo del centrado vertical y horizotal.
    En mi trabajo me paaron una dirección en cuyo código centran una capa dentro del cuerpo de una página web, peo la misma filosofía se puede emplear para centrar una capa dentro de otra o una imagen dentro de una capa. Eso sí hay que emplear comentarios condicionales para explorer, pero funciona a las mil maravillas en Firefox, Internet explorer 6 y 7, aquí teneis la página, que os aproveche:

    http://www.aplus.co.yu/lab/rdc/

  15. roveratomik [#]

    El segundo método es mas efectivo, sencillo y mas estandarizado para todos los navegadores pero sigue sin solucionar de forma efectiva el problema. Cuando reduces el navegador aun tamaño inferior al del div de centrado se pierde el contenido y no se puede acceder ni con scroll.
    Sobre la solución que nos comenta Carlos Sanchez, tampoco nos sirve si le damos unas dimensiones fijas al div contenedor. En explorer 7 si funciona, pero en Firefox se pega a la izq.

  16. david10 [#]

    No tengo mucha idea de css (parece que tu si).

    Estoy buscando un código que haga lo que se supone que dices que hace este.
    El problema es el siguiente:

    – el primero de de tus códigos hace los quiero en FF pero no funciona en IE7 (esto ya o sabes)

    – el segundo de los codigos funciona en IE7, pero mal. Mientras el objeto a centrar sea más pequeño que la ventana no hay problema. Si reduzco el tamaño de la ventana hasta hacerla más pequeña que el objeto, entonces la parte superior del objeto desaparece por el margen superior y no puedo subir el scroll para verla.

    Se te ocurre cómo arreglar esto??

    gracias.

    David.

  17. vitogq [#]

    Hola, yo quiero centrar vertical un elemento li, pero no tengo ni idea de como hacerlo, he probado a poner display:table en el ul y display:table-cell en el li, pero no funciona, ni en ie7, ni en FF

    Agradeceria cualquier ayuda.

    Mi codigo:

    Explicacion: Esto es el menu de la pagina, la idea es poder centrar verticalmente los enlaces en cada li.

    #otras ul{
    margin : 0px;
    padding: 0px 0px 0px 4px;
    list-style: none;
    display:table;
    }

    #otras li{
    text-align: left;
    border: 0px solid #E9D596;
    margin: 8px 0px;
    /* padding: 4px 0px 0px 4px;*/
    width:140px;
    height:25px;
    vertical-align:middle;
    background: #E9D596;
    border: 1px solid #FF0000;
    display: table-row;
    }

    #otras A{
    color: #451B08;
    text-decoration:none;
    }

  18. Jorge Epuñan [#]

    vitogq, acabo de publicar un articulo q te puede ser de ayuda: Centrando texto verticalmente.

    Suerte

  19. me [#]

    Hola

    Me parece que no existe ningun codigo robusto que sirva para centrar div.

    En cuanto se minimiza, se estropea todo.

    La solución real sería una tal , que al minimizar, puedas navegar por la pagina completa (maximizada) a traves de las barras de desplazamiento, siempre manteniendo las proporciones respecto a la ventana desponible maximizada.

    Si das con la solución, enviame un correo.

    Un saludo

  20. alex [#]

    en firefox no funciona ni en PC ni en MAC, en PC me sale un scrollbar para que se vea el margen inferior que tiene o que deberia tener el mismo margen superior.

  21. Jorge Epuñan [#]

    alex, en mac funciona en safari 3, ff 3, y opra 9.5, en windows no he probado apenas tenga un pc a mano lo hago. pero este metodo funciona.

  22. yo [#]

    ese codigo no funciona en ie, solo mirando el ejemplo te das cuenta que no esta centrado

  23. Luis Rodriguez [#]

    Hola Pues facilita la vida tus post , mas yo tengo el mismo problema:

    el problema. Cuando reduces el navegador aun tamaño inferior al del div de centrado se pierde el contenido y no se puede acceder ni con scroll.

    Esto sucede por ejemplo en bajas resoluciones 800×600 se que esta resolucion no es muyusada pero a veces los clientes solicitan para todas las resoluciones.

  24. Tomás Crespo [#]

    En la actualización ¿qué es lo que está centrado verticalmente? El div #contenedor tiene un margen superior fijado a 10px, luego no está centrado, está fijado. La capa #contenido tampoco está centrada con respecto a #contenedor, está pegada a arriba.

    ¿Podrías explicar este ejemplo mejor?

    Gracias

    Estoy usando Firefox 3.0.6

  25. martin [#]

    funciona bien en Firefox, pero en IE 7 no. Mi pregunta es, si lo visualizo desde una pc con resolucion mayor, igual qued centrado?

    Pues en IE trate de darle zoom-out y lo que deberia estar centrado se iba mas para la esquina.

  26. jose [#]

    Muchisimas gracias… necesitaba este truquito xD. Saludos.

  27. diseño web valencia [#]

    También se puede centrar verticalmente el texto del del div, utilizando padding o line-height. Eso sí, el texto debe ser de una sóla línea.

  28. julio cesar [#]

    la verdad no me he fijado si funciona en IE porque uso una mac, después lo pruebo, una sugerencia para IE es usar algo como esto:

    _margin-top:5px; este funciona para ie6
    y si pones *margin-top:5px; funciona para ie6 y 7 o tambien otra forma seria usar margin-top:expression(documentElement?’5′:’10’); el 5 es para ie6 y 7 y el 10 para firefox, espero y les sirva, primero se declara margin-top que este ya serviria para los otros navegadores y si les falla pues usen esos tips.

  29. Juglar : Centrar - Agosto - 2005 [#]

    […] Webmaster Libre » Centrado con CSS (2): Vertical ex animo: Vertical Centering with a Floated Shim CSSLab » Centrado Vertical con CSS Vertical Centering in CSS In the Woods – Vertical Centering With […]

  30. orlando [#]

    En pleno siglo XXI y escribir tanto para centrar algo ….?????
    Guauuu sera que los del consorcio w3c son personas comun y corrientes con conocimientos basicos o sera que firefox, ie, etc no sabne nada ???
    NO LO CREO, pero entonces me pregunto porque el HTML y cs tiene muchsimos errores, yo creo que deben de rediseñar todo y no tratar de parcharlo

  31. Jorge Epuñan [#]

    Orlando: entiendo la frustracion; la W3C ha hecho hasta ahora bien su trabajo, al crear las recomendaciones de estandares, el problema son los creadores de browsers q no hacen q sus motores interpreten correctamente estas recomendaciones. Por otro lado, fijate q son recomendaciones, lo q da para reinterpretaciones (y q es precisamente lo q ha sucedido).

    Enfin, es un tema q da para largo… si te gusta la historia, escribi hace un tiempo sobre los origenes de todo esto, si tienes tiempo dale una leida.

    salu2 y gracias por tus palabras.

  32. Yomarlis MG [#]

    Solo dar gracias por la info este me ha dado buen dolor de cabeza, estare probando.

    Otra vez gracias y abrazos.

  33. REPOLLETE [#]

    A VER SI ME SALE, QUE DIFICIL ES ESTO

  34. Ideas para una mejor codificación y organización CSS | Alberto Gómez - Diseño y Programación Web [#]

    […] Podemos alinear verticalmente un objeto utilizando CSS: ejemplo en csslab.com […]

  35. Diseño web Murcia [#]

    no me gustan los hacks para ie prefiero gastar hojas de estilo aparte

  36. José Manuel Rosón Bravo [#]

    El problema del centrado vertical con css crea no pocos quebraderos de cabeza a clientes y usuarios de páginas web diseñadas por personas sin la debida previsión a la hora de valorar que sus creaciones deben ir orientadas a una perfecta visualización en cualquier formato de pantalla y a través de cualquier cliente.

    La popularización de ordenadores de dimensiones cada vez más reducidas, así como dispositivos móviles con acceso a Internet, deja obsoletas técnicas de centrado vertical válidas en tanto en cuanto los monitores más pequeños ofrecían – salvo contadas excepciones – la clásica dimensión 800×600, tan conocida por todos nosotros.

    La solución basada en aplicar la propiedad margin: 0px auto no es válida en diversos navegadores, entre los que se encuentran Internet Explorer (y no en su versión 6.0, como se ha apuntado en este hilo de discusión, sino actualmente).

    Su mecánica se basa en colocar la propiedad citada en la regla correspondiente al selector del elemento a centrar (a partir de aquí “contenido”), como sigue:

    #contenido {
    POSITION: relative;
    MARGIN: 0px auto;
    WIDTH: 800px;
    HEIGHT: 600px;
    }

    Funciona para el centrado horizontal, pero no ofrece respuesta al problema del centrado vertical, con la caja generalmente localizada en el borde superior.

    El darle a la propiedad MARGIN los valores “0px auto 0px auto” ofrece el mismo resultado, ya que es una redundancia innecesaria del anterior, al tener el mismo significado de acuerdo con las reglas de interpretación de CSS, es decir, un valor de 0 píxeles para los márgenes superior e inferior y un valor de autocentrado para los márgenes izquierdo y derecho.

    Podéis probarlo y comprobarlo con este trozo de código:

    body {
    MARGIN: 0px;
    BACKGROUND: #fff;
    }
    #contenedor {
    POSITION: relative;
    MARGIN: 0px auto 0px auto;
    WIDTH: 400px;
    HEIGHT: 300px;
    BACKGROUND: #FF0000;
    }

    El resultado es el mismo con MARGIN: 0px auto 0px auto; y con MARGIN: 0px; en Chrome, Firefox e Internet Explorer: el elemento “contenedor” se centra horizontalmente pero se posiciona a partir del borde superior.

    En su momento se apuntaron soluciones de diversa índole para solventar la falta de respuesta por parte de los navegadores al centrado vertical, como las expuestas en este mismo espacio.

    Su respuesta al problema es solo aparente, ya que, como bien describen varios de los participantes en la discusión originada a continuación, la visualización en pantallas de reducido tamaño ofrece el inconveniente que inicia precisamente este hilo de debate; esto es, la pérdida de parte del contenido del contenedor en su parte superior e izquierdo como consecuencia de la aplicación del método utilizado.

    Así, se trata de posicionar el origen de coordenadas del contenedor en el centro del espacio disponible en la pantalla en que se visualiza por aplicación de un valor de 50% a las propiedades TOP y LEFT; para, acto seguido, proceder a la corrección que daría centrado al mismo elemento, mediante la técnica de subir la mitad de su altura y desplazar la mitad de su anchura hacia la izquierda dando valores negativos a la propiedad MARGIN.

    El código está accesible en la dirección URL para el que quiera comprobar que, aparentemente funciona, salvo que se proceda a su visionado en una pantalla de menor tamaño. Y ello porque las operaciones descritas afectan a realidades distintas: una (TOP y LEFT al 50%) juegan con el tamaño de la pantalla; y otra, (MARGIN en negativo) con el tamaño del contenedor.

    Por ello, sólo resuelve el problema cuando el contenedor y el espacio disponible en la pantalla se encuentran en las proporciones adecuadas.

    Otro ejemplo de código, también fallido en cuanto intenta visualizarse en pantallas de reducido tamaño, puede ser éste:

    html,body {
    HEIGHT: 100%;
    MARGIN: 0 px;
    PADDING: 0px;
    }
    body {
    TEXT-ALIGN: center;
    MIN-WIDTH: 800px;
    MIN-HEIGHT: 400px;
    }
    #elemento {
    POSITION: absolute;
    TOP: 50%;
    MARGIN-TOP: -200px;
    LEFT: 0px;
    WIDTH: 100%;
    }
    #contenedor {
    WIDTH: 800px;
    MARGIN-LEFT: auto;
    MARGIN-RIGHT: auto;
    HEIGHT: 400px;
    BACKGROUND: #ff0000;
    }

    Se han buscado y probado alternativas, variaciones y correcciones a este mismo procedimiento, que, con mayor o menor imaginación y empeño pretenden ofrecer la solución a este dilema.

    En su momento, yo mismo realicé un estudio sobre esta cuestión, encontrando una respuesta satisfactoria y definitiva a través de la utilización del posicionamiento flotante en lugar del absoluto.

    Así, partimos de este nuevo código que incluye html y css, y que, como podréis apreciar, ofrece una solución válida con independencia de las dimensiones de la pantalla en que se visualice el modelo:

    html, body {
    HEIGHT: 100%;
    }
    body {
    MIN-WIDTH: 800px;
    MIN-HEIGHT: 500px;
    BACKGROUND: #fff;
    }
    #elemento-flotante {
    MARGIN-TOP: -250px;
    WIDTH: 100%;
    FLOAT: left;
    HEIGHT: 50%
    }
    #contenedor {
    POSITION: relative;
    WIDTH: 800px;
    MIN-HEIGHT: 500px;
    MARGIN-LEFT: auto;
    MARGIN-RIGHT: auto;
    CLEAR: both;
    BACKGROUND: #000;
    }

    La razón de la operatividad de esta solución se basa en la conjunción de la naturaleza propia de los elementos flotantes y la propiedad “clear” aplicada en relación a los mismos en otros elementos del conjunto.

    Así, un elemento flotante se caracteriza por quedar fuera del flujo normal de la página, colocándose a derecha o izquierda según se le oriente.

    La propiedad “clear” determina, para un elemento dado, que ningún elemento flotante quede a derecha, izquierda o a ambos lados del mismo aplicándole el valor correspondiente.

    De esta forma, si colocamos un elemento a continuación de otro con posicionamiento flotante – como son el elemento “contenedor” tras “elemento-flotante” –, el primero se situará tras el segundo por aplicación de la propiedad “clear” con valor “both” que vemos en el código.

    De esta forma, “elemento-flotante” actúa, por decirlo de alguna forma, como límite superior del elemento “contenedor”.

    Si articulamos un juego de medidas y proporciones entre body, elemento “contenedor” y le damos a “elemento-flotante” la propiedad “float” y a “contenedor” la propiedad “clear: both”, tenemos un centrado perfecto horizontal y verticalmente.

    Para comentarlo detalladamente:

    ———————————————————–

    html, body {
    HEIGHT: 100%;
    }
    body {
    MIN-WIDTH: 800px;
    MIN-HEIGHT: 500px;
    BACKGROUND: #fff;
    }

    Damos al html y body una altura de 100% con respecto al espacio disponible, aunque estableciendo a continuación unas medidas mínimas de 800px en anchura y 500px coincidentes con las del elemento “contenedor”.

    ———————————————————–

    #elemento-flotante {
    MARGIN-TOP: -250px;
    WIDTH: 100%;
    FLOAT: left;
    HEIGHT: 50%
    }

    A “elemento-flotante” se le impone un posicionamiento flotante, una anchura del 100% y una altura del 50%, que será completada con un margen negativo correspondiente a la mitad de body, lo cual determina que escape por el límite superior de body, debido a que el 50% es, en este caso, 250px.

    ———————————————————–

    #contenedor {
    POSITION: relative;
    WIDTH: 800px;
    MIN-HEIGHT: 500px;
    MARGIN-LEFT: auto;
    MARGIN-RIGHT: auto;
    CLEAR: both;
    BACKGROUND: #000;
    }

    El elemento “contenedor” recibe una anchura de 800px, y es posicionado relativamente para su centrado horizontal automático con respecto a la anchura disponible mediante

    MARGIN-LEFT: auto;
    MARGIN-RIGHT: auto;

    Además, se le da una altura mínima igual a la del body, y se le aplica la propiedad “clear” con el valor “both” para “limpiar” la presencia de cualquier elemento flotante tanto a derecha como a izquierda.

    En este caso, “elemento-flotante”.

    De este modo, “elemento-flotante” siempre se coloca encima del elemento “contenedor”, y con su límite inferior coincidiendo con el límite superior de body,
    actuando a su vez a modo de límite superior del elemento “contenedor”, que no puede escapar de la zona de visualización disponible en la pantalla para cualquier height que quiera dárlese y tamaño de pantalla en prácticamente todos los navegadores existentes en el mercando.

  37. Sergio [#]

    Este es el ejemplo que intenté hacer:

    One Hundred Percent height divs

    #content
    {
    top: 50%;
    left: 0;
    height: 1px;
    }
    #content #inner
    {
    position: relative;
    top: -50%;
    }

    CSSLab – Centrado Vertical

    Utilizando la propiedad display: table para centrar el contenido
    verticalmente dentro de un div con alto fijo. Fue necesario un hack para IE6 (star
    hack) ya que este browser no soporta esta propiedad de display como debería hacerlo
    (tremenda novedad…). La idea es que tu contenido esté contenido dentro del div
    inner “. Probado con Safari, FF e IE6

  38. Sergio [#]

    Ahí va:

    One Hundred Percent height divs

    #content
    {
    top: 50%;
    left: 0;
    height: 1px;
    }
    #content #inner
    {
    position: relative;
    top: -50%;
    }

    CSSLab – Centrado Vertical

    Utilizando la propiedad display: table para centrar el contenido
    verticalmente dentro de un div con alto fijo. Fue necesario un hack para IE6 (star
    hack) ya que este browser no soporta esta propiedad de display como debería hacerlo
    (tremenda novedad…). La idea es que tu contenido esté contenido dentro del div
    inner “. Probado con Safari, FF e IE6

  39. José Manuel Rosón Bravo [#]

    A día de hoy , 13 de noviembre de 2011, y tras ver que se han producido comentarios en relación a este mismo tema, me reitero sobre la validez del método que expuse el pasado día 5 de febrero.

    Os aconsejo su utilización por su sencillez y total fiabilidad de cara la inmensa mayoría de navegadores (todos los que he probado) y plataformas, sin que se haga precisa la utilización de tablas ni otros elementos.

    Un saludo.

    José Manuel Rosón Bravo

  40. No se como meterle este condicional a una web | FOROS VIP [#]

    […] Este es un condicional que he visto en un ejemplo de una pagina (http://www.csslab.cl/2007/01/12/cent…tical-con-css/): […]

  41. No se como meterle este condicional a una web [#]

    […] Este es un condicional que he visto en un ejemplo de una pagina (http://www.csslab.cl/2007/01/12/cent…tical-con-css/): […]

  42. Phe [#]

    A ver si es verdad que empieza a funcionar con CSS3, porque con las tablas es supersencillo de aplicar!!

  43. worldjamblog [#]

    Gracias Jorge! Despues de estar horas probando y probando he descubierto este artículo tuyo, ya conocía tu blog, pero en esta ocasión me ha servido de gran ayuda!!

  44. José Manuel Rosón Bravo [#]

    En relación al comentario

    “A ver si es verdad que empieza a funcionar con CSS3, porque con las tablas es supersencillo de aplicar!!”

    Tengo que decir que el uso de tablas para centrar elementos no es correcto y, de hecho, se abandonó hace muchos años.

    Las tablas son elementos que sirven para la organización de datos en filas y columnas, y no dar forma a páginas o elementos dentro de las mismas.

    Reitero la funcionalidad del método que he expuesto.

    Un saludo.

    José Manuel Rosón Bravo

  45. MaX [#]

    Gracias!!! esto me ayudo mucho!

  46. rigobertoduuarte [#]

    Muchas gracias, despues de mucho buscar al fin uno que muestra un ejemplo sencillo sin padding o margin.

  47. Fernando [#]

    Después de tanta busqueda, al fín una solución a mi problema. Muchas gracias.

  48. Oscar [#]

    Gracias por el tip, con el sig. código me funcionó perfecto.

    display: table-cell;
    vertical-align: middle;
    position: relative;

  49. Cesar [#]

    También podemos ver aquí para poder centrar verticalmente.
    http://goo.gl/Xv7hLG

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab