Como faço para centrar o texto verticalmente com o CSS?

Outra maneira (ainda não mencionada aqui) é com Flexbox .

Basta adicionar o seguinte código ao elemento container :

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

Demonstração do Flexbox 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

Em alternativa, em vez de alinhar o conteúdo através do recipiente , a flexbox também pode centrar o item a flex com uma margem automática quando há apenas um item flex no flex recipiente (como o exemplo dado na pergunta acima).

Demonstração Do Flexbox 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}

<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: Tudo o que precede aplica-se aos itens centrados enquanto os estabelece em linhas horizontais. Este é também o comportamento padrão, porque por padrão o valor para flex-direction é row. Se, no entanto, flex-itens precisam para ser estabelecidos em colunas verticais, então flex-direction: column deve ser definido no recipiente para definir o principal eixo como coluna e, além disso, o justify-content e align-items propriedades agora trabalho outro com justify-content: center centralizar verticalmente e align-items: center centralizar horizontalmente)

flex-direction: column demonstração

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }

<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Um bom lugar para começar com Flexbox para ver alguns dos seus recursos e obter sintaxe para o navegador máximo o suporte é flexyboxes

Além disso, o suporte do navegador hoje em dia é muito bom: caniuse

Para a compatibilidade com o cross-browser de display: flex e align-items, pode utilizar o seguinte:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

Você pode facilmente fazer isso adicionando a seguinte parte do código CSS:

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

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}

<div id="box">
  Some text
</div>

Para referência e para adicionar uma resposta mais simples:

CSS puro:

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Ou como Mistura SASS/SCSS:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Utilizar por:

.class-to-center {
    @include vertical-align;
}

Este método pode fazer com que os elementos sejam desfocados devido ao elemento que está a ser colocado num "meio pixel". Uma solução para isto é definir o seu elemento-mãe para preservar-3d. do seguinte modo:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

aprende!

Todo o crédito vai para este proprietário de ligação @Sebastian Ekström Link; por favor, passe por isto. Ver em acção codepen . Ao ler o artigo acima, criei também Um Violino demo .

A Transformada de propriedade CSS é normalmente utilizada para rodar e dimensionar elementos, mas com a sua função translateY podemos agora alinhar os elementos verticalmente. Normalmente, isto deve ser feito com posicionamento absoluto ou ajuste de altura de linha, mas estes requerem que você saiba a altura do elemento ou só funciona em texto de linha única, etc.

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
} 

Para torná-lo ainda mais simples, podemos escrevê-lo como um mixin com os seus prefixos de Fornecedor.

As Flexboxes introduzidas no CSS3 são a solução:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}

<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Nota : Substitua a linha acima da qual foi marcada como importante por uma destas linhas, se quiser centrar o texto:

Apenas verticalmente:

margin: auto 0;

2) apenas horizontalmente:

margin: 0 auto;

UPDATE : Como eu notei, este truque também funciona com grades (display: grid).

Abordagem Flexível

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>

A solução aceite como resposta é perfeita para usar line-height o mesmo que a altura do div, mas esta solução não funciona perfeitamente quando o texto está embrulhado ou está em duas linhas.

Tenta este caso se o texto estiver embrulhado ou estiver em várias linhas dentro de um div.

#box
{
  display: table-cell;
  vertical-align: middle;
}

Para mais Referência, ver:

• Centrar Verticalmente O Texto Multi-Alinhado

• 6 Métodos De Centralização Vertical Com CSS

Tenta Esta solução:

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Construído com CSS+.

Também pode usar as propriedades abaixo.

display: flex; 
align-content: center; 
justify-content : center;

Pode usar o seguinte excerto de código como referência. Está a funcionar como um encanto para mim.

<!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>

        <body style="background:#3cedd5">
            <div class="centered-text">
                <h1>Yes, it's my landing page</h1>
                <h2>Under construction, coming soon!!!</h2>
            </div>
        </body>
    </html>

O resultado do excerto de código acima é o seguinte:

Crédito ao código-fonte: Como faço para centrar o texto verticalmente com o CSS? - Código Puran

De outra maneira:

Não defina o atributo height do div, mas em vez disso use padding: para atingir o efeito. Da mesma forma que a altura da linha, ela só funciona se você tiver uma linha de texto. Embora desta forma, se você tiver mais conteúdo, o texto ainda será centrado, mas o próprio div será ligeiramente maior.

div {
  height:120px;
  line-height: 120px;
}

Podes dizer:

div {
   padding: 60px 0; //Maybe 60 minus font-size divided by two, if you want to be  exact
}

Isto irá definir o topo e o fundo padding do div para 60px, e a esquerda e à direita padding para zero, tornando o div 120px (mais a altura do seu tipo de letra) elevado, e colocando o texto centrado verticalmente no div.

Para todas as suas necessidades de alinhamento vertical!

Declare esta mistura:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Depois inclui - o no teu elemento:

.element{
    @include vertical-align();
}

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}

<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

Demonstração do JSFiddle para tocares violino.

Suporte para Caniuse: 85.22% + 6.26% = 91.48% (até eu está dentro!)

Para uma única linha de texto (ou um único carácter) pode utilizar esta técnica:

Pode ser usado quando #box tem uma altura relativa não fixa, em %.

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

Ver demonstração ao vivo em JsBin (mais fácil de editar CSS) ou JsFiddle (mais fácil de alterar a altura da moldura do resultado).

Se quiser colocar o texto interno em HTML, não em CSS, então terá de embrulhar o conteúdo do texto no elemento adicional inline e editar #box::after para corresponder. (E, claro, content: a propriedade deve ser removida.)
Por exemplo,
<div id="box"><span>TextContent</span></div>
Neste caso #box::after deve ser substituído por #box span.

Para o suporte IE8 deve substituir :: por :.

A maneira simples e versátil é (como michielvoo table approach):

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display:table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

Usar este atributo (ou uma classe equivalente) numa marca-mãe funciona mesmo para muitos childs alinharem:

<parent ctrv>  <ch1/>  <ch2/>   </parent>

Tenta a propriedade transformar:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Uma solução muito simples e mais poderosa para alinhar verticalmente o centro:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}

<div class="outer-div">
  <span class="inner">No data available</span>
</div>

O seguinte código irá colocar o div no meio do ecrã, independentemente do tamanho do ecrã ou div Tamanho:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Ver mais detalhes sobre flex toma.

Exemplo:

div{ display:flex; align-item:center;}

Tente o seguinte código:

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

div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}

<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>

Eu gostaria apenas de estender a resposta de @michielvoo,a fim de liberar a necessidade de linha-altura e respiração de altura de div. É basicamente uma versão simplificada como esta:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

Nota: parte de css, comentada, é necessária para fixed-height Fechar div.

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}

<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

é óbvio que não precisas das fronteiras, mas elas podem ajudar-te a ver como funciona.

Coloque-o dentro button em vez de div Se não se importar com o seu pequeno efeito visual 3D.

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}

<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>

.element{position: relative;top: 50%;transform: translateY(-50%);}

Adicione este pequeno código na propriedade CSS do seu elemento. É fantástico. Experimenta!

Os navegadores mais recentes suportam agora a função CSS calc. Se está a visar estes navegadores, poderá querer fazer algo do género:

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

A chave é usar style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" dentro de um div pai absoluto ou relativamente posicionado.

Onde quer que queira o estilo do centro vertical significa que pode tentar {[[2]} e vertical-align:middle.

Exemplo:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}

<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Posicionamento absoluto e alongamento

Tal como acontece com o método acima, este começa por definir o posicionamento sobre os elementos progenitores e filhos como relativo e absoluto, respectivamente. Daí as coisas diferem.

No código abaixo usei mais uma vez este método para centralizar a criança tanto na horizontal como na vertical, embora possa usar o método apenas para centralização vertical.

Html

<div id="parent">
    <div id="child">Content here</div>
</div>

Css

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

A ideia com este método é tentar fazer com que o elemento-filho se estique a todas as 4 arestas, ajustando os valores superior, inferior, direito e esquerdo para 0. Porque o nosso elemento-filho é menor do que os nossos elementos-mãe, não consegue atingir todas as 4 arestas.

A configuração automática como a margem em todos os 4 lados, no entanto, faz com que as margens opostas sejam iguais e mostra o nosso div filho no centro do div pai.