Dos métodos para alinear verticalmente

Alinear algo verticalmente no es simple a menos que se trate de cosas sencillas y cuando pretendemos hacerlas un poco más complejas se vuelve una tarea titánica y generalmente nos damos por vencidos o recurrimos a márgenes, paddings y aritmética.

Estos son dos métodos diferentes para tratar de resolver el problema.

Para el primero, lo que necesitamos hacer es tener dos DIVs, un contenedor externo y un contenedor interno. El truco, consiste en utilizar la propiedad position para centrar el contenido justo en la mitad del contenedor:

<style>
  #contenedor1 {
    position: relative;
    height: 300px; width: 450px; /* le damos un ancho y un alto */
    margin:0 auto; /* eventualmente, lo centramos */
  }
  #contenido1 {
    position: absolute; 
    height: 50%; width: 50%; /* y centramos todo */
    left: 25%; top: 25%;
    text-align: center; /* incluyendo los textos */
  }
  #contenedor1 img { /* la imagen del demo también la centramos */
    display: block;
    margin: 0 auto;
  }
</style>

<div id="contenedor1">
  <div id="contenido1">
    <img src="URL_imagen"/>
    <span> ... un texto cualquiera ... </span>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Este tipo de solución funcionará en casi cualquier navegador incluyendo Internet Explorer. Por el contrario, el segundo método que es mucho más interesante y flexible sólo funcionará en navegadores actualizados: IE8, Firefox, Safari, Chrome y Opera.

Utiliza una propiedad diferente llamada display y algunos de los nuevos valores que se han ido agregando como son table y table-cell; es decir, de alguna manera, generamos una tabla sin usar las etiquetas de tablas y aprovechamos una de sus mayores ventajas: la posibilidad de centrar verticalemente el contenido de esas pseudo-celdas.

El esquema es muy similar al anterior, sólo usamos un DIV extra:

<style>
  #contenedor2 {
    display: table;
    height: 300px; width: 450px; /* le damos un ancho y un alto */
    margin:0 auto; /* eventualmente, lo centramos */
  }
  #contenido2 {
    display: table-cell;
    vertical-align: middle; /* centramos verticalmente */
  }
  #pseudo-celda {
    width: 250px; /* establecemos el ancho */
    margin: 0 auto; /* centramos el contenido */
    text-align: center;
  }
  #contenedor2 img { /* la imagen del demo también la centramos */
    display: block;
    margin: 0 auto;
  }
</style>

<div id="contenedor2">
  <div id="contenido2">
    <div id="pseudo-celda">
      <img src="URL_imagen"/>
      <span> ... un texto cualquiera ... </span>
    </div>
  </div>
</div>

¿Por qué es más flexible? Porque podemos variar su tamaño de manera dinámica y todo permanecerá centrado.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

VARIAR EL ANCHO : width:350px; | width:400px; | width:550px; | reset
VARIAR LA ALTURA : height:400px; | height:450px; | height:500px; | reset