Centrar un div verticalmente en CSS

Hay varias maneras para centrar un div verticalmente en CSS en un documento web, pero la mejor manera y compatible con la gran mayoría de navegadores y sus respectivas versiones es haciendo uso de la regla propiedad display: table y vertical-align: middle.

Ejemplo:

.contenedor {

  display: table;

  height: 500px;

  width: 100%;

}



.contenido {

  display: table-cell;

  vertical-align: middle;

}

<div class="contenedor">

  <div class="contenido">

      <h1>TEXTO CENTRADO VERTICALMENTE</h1>

  </div>

</div>

Al contenedor le ponemos la propiedad display:table. Al contenido le ponemos la propiedad display:table-cell y vertical-align:middle. El resultado es que el contenido se centrará verticalmente dentro del contenedor. Es posible que te encuentres con problemas a la hora de centrarlo verticalmente usando estas reglas si el contenedor no tiene un height establecido. En el ejemplo hemos forzado un height a 500px.