¿Cómo puedo centrar verticalmente el texto con CSS?

Puedes probar este enfoque básico:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello World!
</div>

Sin embargo, sólo funciona para una sola línea de texto, porque establecemos la altura de la línea a la misma altura que el elemento de caja que la contiene.

Un enfoque más versátil

Esta es otra forma de alinear el texto verticalmente. Esta solución funcionará para una sola línea y múltiples líneas de texto, pero todavía requiere un contenedor de altura fija:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

El CSS sólo dimensiona el <div>, alinea verticalmente el <span> estableciendo la altura de línea del <div> igual a su altura, y hace del <span> un bloque en línea con alineación vertical: medio. A continuación, devuelve la altura de línea a la normal para el <span>, de modo que su contenido fluya de forma natural dentro del bloque.

Simulando la visualización de una tabla

Y aquí tenemos otra opción, que puede no funcionar en los navegadores más antiguos que no soportan display: table y display: table-cell (básicamente sólo Internet Explorer 7). Usando CSS simulamos el comportamiento de la tabla (ya que las tablas soportan la alineación vertical), y el HTML es el mismo que el del segundo ejemplo:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

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

Usando el posicionamiento absoluto

Esta técnica utiliza un elemento con posicionamiento absoluto estableciendo la parte superior, inferior, izquierda y derecha a 0. Se describe con más detalle en un artículo de Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS.

Puede hacerlo fácilmente añadiendo el siguiente fragmento de código CSS:

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

Esto significa que su CSS finalmente se ve como:

#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 una sola línea de texto (o un solo carácter) puede utilizar esta técnica:

Se puede utilizar cuando #box tiene una altura no fija, relativa en %.

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

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

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

Ver una demostración en vivo en JsBin (más fácil de editar CSS) o [JsFiddle][2] (más fácil de cambiar la altura del marco de resultados).

Si quieres colocar el texto interior en HTML, no en CSS, entonces necesitas envolver el contenido del texto en un elemento adicional inline y editar #box::after para que coincida. (Y, por supuesto, hay que eliminar la propiedad content:).

Por ejemplo, <div id="box"><span>TextContent</span></div>. En este caso, #box::after debe sustituirse por #box span.

Para la compatibilidad con Internet Explorer 8 debe sustituir :: por :.