¿Es posible alinear verticalmente el texto dentro de un div?

El código a continuación (también disponible como una demostración en JS Fiddle ) no coloca el texto en el medio, como lo idealmente me gustaría. No puedo encontrar ninguna manera de centrar verticalmente el texto en un div, incluso usando el atributo margin-top . ¿Cómo puedo hacer esto?

 
1234 yet another text content that should be centered vertically
 #column-content { display: inline-block; border: 1px solid red; position:relative; } #column-content strong { color: #592102; font-size: 18px; } img { margin-top:-7px; vertical-align: middle; } 

Crea un contenedor para tu contenido de texto, quizás un span .

 #column-content { display: inline-block; } img { vertical-align: middle; } span { display: inline-block; vertical-align: middle; } /* for visual purposes */ #column-content { border: 1px solid red; position: relative; } 
 
1234 yet another text content that should be centered vertically

Andres Ilich tiene razón. Solo en caso de que alguien pierda su comentario …

A.) Si solo tiene una línea de texto:

 div { height: 200px; line-height: 200px; /* <-- this is what you must define */ } 
 
vertically centered text

Actualización 10 de abril de 2016

Ahora se deben usar Flexboxes para alinear elementos verticalmente (o incluso horizontalmente).

 
Item
Item
Item
Item

Se puede leer una buena guía de flexbox en CSS Tricks . Gracias Ben (de los comentarios) por señalar, no tuve tiempo para actualizar.


Un buen tipo llamado Mahendra publicó una solución muy útil aquí

La siguiente clase debe hacer que el elemento se centre horizontal y verticalmente en su elemento principal.

 .absolute-center { /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:center; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /* W3C */ display:box; box-pack:center; box-align:center; } 

Esta es una pregunta antigua, pero la respuesta aceptada no funciona para el texto de varias líneas. Actualicé JSfiddle para mostrar css texto multilínea alineación vertical como se explica aquí :

 
yet another text content that should be centered vertically
#column-content { border: 1px solid red; height: 200px; width: 100px; } div { display: table-cell; vertical-align:middle; text-align: center; }

También funciona con
en “otro más …”

Prueba esto:

HTML

 
Text

CSS

 div { height: 100px; } span { height: 100px; display: table-cell; vertical-align: middle; } 

Se supone que esto simplemente funciona:

 #column-content { -------- margin-top:auto; margin-bottom:auto; } 

Lo intenté en tu demo.

Para hacer que la solución de Omar (o de Mahendra) sea aún más universal, el bloque de código relativo a FireFox debería reemplazarse por lo siguiente:

 /* Firefox */ display:flex; justify-content:center; align-items:center; 

El problema con el código de Omar, que de otro modo sería operativo, surge cuando quieres centrar el cuadro en la pantalla o en su antecesor inmediato. Este centrado se hace estableciendo su posición para

position: relative; o position:static; (no con la posición: absoluta ni fija).

y luego margin: auto; o margen-derecha: auto; margin-left: auto;

En este entorno de alineación central de cuadros, la sugerencia de Omar no funciona. No funciona tampoco en IE8 (sin embargo, 7,7% de cuota de mercado). Por lo tanto, para IE8 (y otros navegadores), se debe considerar una solución alternativa como se ve en otras soluciones anteriores.

Esta es la forma más sencilla de hacerlo si necesita varias líneas. Envuelva el texto en otro span y especifique su altura con el alto de line-height . El truco de las líneas múltiples es restablecer la line-height span interior.

 YOUR TEXT HERE 
 .textvalignmiddle { line-height: /*set height*/; } .textvalignmiddle > span { display: inline-block; vertical-align: middle; line-height: 1em; /*set line height back to normal*/ } 

MANIFESTACIÓN

Por supuesto, el span exterior podría ser un div o whathaveyou

Agregue una alineación vertical #column-content strong al css #column-content strong también:

 #column-content strong { ... vertical-align: middle; } 

También vea su ejemplo actualizado .

=== ACTUALIZACIÓN ===

Con un lapso alrededor del otro texto y otra alineación vertical:

html:

 ... yet another text content that should be centered vertically ... 

css:

 #column-content span { vertical-align: middle; } 

Ver también el siguiente ejemplo .

Sé que es totalmente estúpido y normalmente no deberías usar tablas cuando no se crean tablas pero: las celdas de la tabla pueden alinear varias líneas de texto centradas verticalmente e incluso hacer esto de forma predeterminada. Entonces, una solución que funciona bastante bien podría ser algo como esto:

html:

 
lorem ipsum ...

CSS: (hacer que el elemento de la tabla siempre se ajuste al cuadro div)

 .box { /* for example */ height: 300px; } .textalignmiddle { width: 100%; height: 100%; } 

mira aquí: http://www.cssdesk.com/LzpeV