Alineación vertical y problema de alineación horizontal

Intento crear un diseño como este, que esté centrado tanto horizontal como verticalmente.

texto alternativo

He descubierto una forma de hacer esto con jQuery, pero parece haber un ligero tirón a medida que la página renderiza. Esperaba hacer este diseño con CSS puro, pero parece que no puedo entender cómo hacerlo. Aquí está el violín para este diseño. Gracias

http://jsfiddle.net/rodmjay/LnRq6/

Una combinación de alineación vertical y visualización en su CSS hará el truco:

 #container .item { display: table-cell; vertical-align: middle; ... } 

Creo que es imposible alinear verticalmente esto con CSS puro y sin tablas. Necesita que todos los elementos tengan la misma altura para alinearlos verticalmente.

ACTUALIZACIÓN 2016: puede usar display flex, es increíble para esto