css centrado vertical

¿Cómo podría centrar verticalmente un

dentro de un

?

mi código hasta el momento:

 

lo he intentado “arriba: 50%;” y “vertical-align: middle;” sin éxito

EDITAR: está bien, así que se ha discutido mucho. y quizás haya comenzado otra mini guerra de llamas. pero por el bien de los argumentos, ¿cómo lo haría con una mesa? He usado css para todo lo demás hasta ahora, así que no es como si no estuviera tratando de emplear “buenas prácticas”.

EDITAR: el div interno no tiene una altura fija

En resumen, estás lleno. Más sobre esto en una pregunta reciente pregunté ¿Puedes hacer este diseño HTML sin usar tablas? Básicamente, los fanáticos de CSS necesitan controlarse y darse cuenta de que simplemente hay algunas cosas que no puedes hacer (o que no puedes hacer bien) sin tablas.

Esta histeria anti-mesa es ridícula.

Las celdas de tabla manejan el centrado vertical muy bien y son compatibles con versiones anteriores en la medida de lo posible. También manejan el contenido lado a lado mucho mejor que los flotantes, el posicionamiento relativo / absoluto o cualquiera de los otros métodos de tipo CSS.

Joel acuñó (o al menos popularizó) el término “astronautas del arquitecto” en Do not Let Architecture Astronauts Scare You . Bueno, en la misma línea, creo que el término “CSS Astronaut” (o “CSS Space Cadet”) es igualmente apropiado.

CSS es una herramienta increíblemente útil, pero también tiene algunas limitaciones bastante serias. Mi lista de números favoritos de washow solo puede aparecer como “3”. pero no “3)” o “(3)” (al menos antes del contenido generado por CSS3, ¿o es CSS2.1? De cualquier manera no es ampliamente compatible). Qué supervisión.

Pero más grande que eso es el centrado vertical y el diseño de lado a lado. Estas dos áreas siguen siendo un gran problema para CSS puro. Otro afiche decidió que el posicionamiento relativo combinado con las alturas de margen negativo era el camino a seguir. ¿Cómo es eso mejor que:

   Layout    
Inner

que funcionará en todas partes, todo el tiempo.

Aquí hay un artículo sobre centrado vertical en CSS . Para lograr algo similar, utilizan tres divs nesteds con relativo + absoluto + posicionamiento relativo solo para obtener el centrado vertical . Lo siento, pero quien escribió eso, y cualquiera que piense que es una buena persona, simplemente ha perdido la ttwig.

Un contraargumento se da en Tablas vs CSS: Beans de CSS Trolls . La prueba realmente está en el pudín. La gran mayoría de los 20 sitios principales (Alexa) aún usan tablas para el diseño. Con buena razón.

Así que decide por ti mismo: ¿quieres que tu sitio funcione y dedique menos tiempo a que funcione? ¿O quieres ser un astronauta de CSS?

No es trivial, puede haber salvedades, y no es algo que CSS maneje bien en este punto.

Sin embargo, es ampliamente discutido y googleable . Este es un buen ejemplo.

Hagas lo que hagas, por favor no recurrir a las tablas.


Editar: esto es ridículo, lo siguiente funciona perfectamente en un documento estricto sin recurrir al marcado de tabla:

   
Any text any height

Me gusta esta solución mejor. Es para IE8 +, y es fácil de entender.

  
Centered Content

arriba: 50%; Deberia trabajar. debe colocar el margen superior en la mitad negativa de la altura o se iniciará en el medio. Por lo tanto, necesitas la altura del div interno. Probablemente también necesites una posición: relativa;

Algo así para ti div interior.

 position:relative; top: 50%; height:80px; margin-top: -40px; /*set to a negative number 1/2 of your height*/ 

No es muy ordenado trabajar con tamaños negativos (¿qué significa eso?), Pero tal vez la forma más fácil.

 
vertically centered

más información

Dos técnicas de muchos

La compatibilidad del navegador de lo siguiente ha sido probada solo en IE. Los navegadores modernos deberían manejar estos sin problemas.

# 1 – Margen absoluto y automático

Compatibilidad: IE 8 +

  • La combinación de arriba, derecha, abajo, izquierda y margin: auto centra el div verticalmente y horizontalmente.

  • El ancho y la altura son necesarios, pero pueden ser porcentajes

También se puede aplicar a un div interno con la position: relative conjunto principal position: relative

Nota: es posible un max-width max-height y max-height lugar de un alto de porcentaje, IE 9 +. IE 8 requiere una height .

 html, body { height: 100%; } .outer { background: #ff8f00; height: 50%; width: 50%; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 
 

¿Es absolutamente necesario hacer esto con CSS? El enlace de arriba se ve bastante bien, pero puedes obtener un resultado usando javasctipt / jquery: determina la altura del div innter y ajusta el margen. Algo similar a: (jquery)

 var gap = ( $('the-outer-div').height() - $('the-inner-div').height() ) /2; $('the-inner-div').css( "margin-top" , gap ); 

No es necesaria una tabla si está dispuesto a utilizar el modelo de pantalla flexbox.

P.ej

 
This text would be both vertically AND horizontally centered, if it's inner height and width were less than the parent's height and width.

Si solo desea el centrado vertical, utilice la regla “margen: auto 0”; en el niño div.

ps Deberá introducir un prefijo en el uso de flexbox si desea compatibilidad entre navegadores (por ejemplo, “display: -webkit-flexbox;”)

La display: flex propiedad display: flex funciona especialmente bien para el centrado, tanto vertical como horizontal. Para el centrado vertical, agregue la display: flex propiedades display: flex y justify-content: center al contenedor.

Pruebe línea-altura