É possível alinhar verticalmente o texto dentro de uma div?

O código abaixo (também disponível como uma demonstração no JS Fiddle ) não posiciona o texto no meio, como eu gostaria que ele fosse. Não consigo encontrar nenhuma maneira de centralizar verticalmente o texto em uma div, mesmo usando o atributo margin-top . Como posso fazer isso?

 
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; } 

Crie um contêiner para o seu conteúdo de texto, talvez um 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 está certo. Apenas no caso de alguém perder o seu comentário …

A.) Se você tiver apenas uma linha de texto:

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

Atualização de 10 de abril de 2016

Flexboxes agora devem ser usados ​​para alinhar itens verticalmente (ou até mesmo horizontalmente).

 
Item
Item
Item
Item

Um bom guia para o flexbox pode ser lido em CSS Tricks . Obrigado Ben (dos comentários) por apontar, não teve tempo para atualizar.


Um cara bom chamado Mahendra postou uma solução muito funcional aqui

A seguinte class deve fazer o elemento horizontal e verticalmente centrado em seu pai.

 .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; } 

Este é um thread antigo, mas a resposta aceita não funciona para o texto de várias linhas e este é o principal resultado no google. Eu atualizei o jsfiddle para mostrar o alinhamento vertical do texto multilinhas css como explicado aqui

 
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; }

ele também funciona com o “em outro …”

Tente isto:

HTML

 
Text

CSS

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

Isso simplesmente deveria funcionar:

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

Tentei em sua demonstração.

Para tornar a solução de Omar (ou Mahendra) ainda mais universal, o bloco de código relativo ao FireFox deve ser substituído pelo seguinte:

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

O problema com o código de Omar, caso contrário operativo, surge quando você quer centralizar a checkbox na canvas ou em seu ancestral imediato. Essa centralização é feita definindo sua posição

position: relative; ou position:static; (não com posição: absoluta nem fixa).

e depois margem: auto; ou margem direita: auto; margin-left: auto;

Sob esse ambiente de alinhamento do centro de checkbox, a sugestão de Omar não funciona. Não funciona no IE8 (ainda 7,7% de market share). Portanto, para o IE8 (e outros navegadores), uma solução alternativa, como vista em outras soluções acima, deve ser considerada.

Essa é a maneira mais simples de fazer isso se você precisar de várias linhas. Embrulhe o texto em outro span e especifique sua altura com a altura da line-height . O truque para várias linhas é redefinir a line-height span interna.

 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*/ } 

DEMO

Claro que a span externa poderia ser um div ou algo assim

Adicione um alinhamento vertical ao css #column-content strong também:

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

Veja também seu exemplo atualizado .

=== UPDATE ===

Com um espaço ao redor do outro texto e outro alinhamento vertical:

html:

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

css:

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

Veja também o próximo exemplo .

Eu sei que é totalmente estúpido e você normalmente não deve usar tabelas quando não está criando tabelas, mas: As células da tabela podem alinhar múltiplas linhas de texto verticalmente centralizadas e até fazer isso por padrão. Então, uma solução que funciona bem pode ser algo assim:

html:

 
lorem ipsum ...

css: (faz com que o item da tabela caiba sempre na div da checkbox)

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

veja aqui: http://www.cssdesk.com/LzpeV