En este articulo veremos un sencillo truco para centrar casi cualquier elemento con solo CSS gracias a las nuevas posibilidades que nos ofrece CSS3

Por ejemplo tenemos esta situación:

<div class="container">
     <div class="title">
          <h1>Título de la página</h1>
          <h2>Subtítulo de la página</h2>
     </div>
</div>

Queremos que el elemento .title este centrado dentro de .container, para eso podemos hacer lo siguiente:

.container {
     height:500px;
}

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

Vamos por partes, primero debemos definir un alto al elemento «padre», en este caso .container, sino el truco no va a funcionar

Después definimos que .title que se posicione a la mitad del elemento «padre» con top:50%, hasta aquí perfecto, pero el problema que tenemos es que el centrado no tiene en cuenta la altura del mismo elemento, aquí entra en juego el transform negativo, lo que hace es «mover» el elemento la mitad de su altura para arriba, corrigiendo así su posición.

Para que este truco funcione en todos los navegadores debemos utilizar los prefijos para navegadores con la propiedad transform a no ser que utilicemos una aplicación de «auto-prefix», así que el código completo sería:

.container {
     height:500px;
}

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

La idea original la vi en este articulo de Sebastian Ekström

¡Espero que os sea de utilidad!