Centro verticale CSS con div dinamica - javascript, jquery, css, html

Ho un div chiamato contenitore che sto cercando di centrare verticalmente, ho centrato verticalmente, ma ora aggiungo i div in jQuery, come:

$("#add").on("click", function () {
$(".elements").append("<div class="element">World</div>");
});

Ecco un JSFiddle: http://jsfiddle.net/CDk4E/

Qual è il problema:

Se non hai ancora aggiunto alcun div, la pagina sembra buona (è centrata verticalmente). Ma se inizi ad aggiungere div "s, il .element div che contiene "Hello" viene spinto verso l'alto. Ma quello che mi piacerebbe davvero fare è invece tenerlo nel posto originale e avere l'altro .element le div sono appena aggiunte sul fondo.

MODIFICARE: Inoltre, il primo elemento è sempre una dimensione fissa.

risposte:

Prova ad aggiungere imbottitura: 50%; al tuo .container

<style>
html, body {
height: 100%;
}
.wrapper {
height: 100%;
width: 500px;
margin:0 auto;
display: table;
}
.container {
display: table-cell;
height: 100%;
padding-top:50%;
border:1px red dashed;
position:relative;
}

.element{
background:purple;
color:#FFF;
width:100%;
padding:10px;
}

</style>

Ecco il risultato: http://jsfiddle.net/CDk4E/2/