javascript - 具有动态 div 的 CSS 垂直居中

Question

我有一个名为 container 的 div，我试图将其垂直居中。我已经将它垂直居中，但现在我通过 jQuery 向它添加 div，例如:

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

这是一个 JSFiddle:http://jsfiddle.net/CDk4E/

问题是什么:

如果您还没有添加任何 div，页面看起来不错(垂直居中)。但是，如果您开始添加 div，包含“Hello”的 .element div 将被推到顶部。但我真正想做的是将它保留在原来的位置，并将其他 .element div 添加到底部。

编辑:此外，第一个元素始终是固定大小。

Answer 1

尝试将 padding:50%; 添加到您的 .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>

这是结果:http://jsfiddle.net/CDk4E/2/