Question

我有一个叫做容器的div，我试图垂直居中。我已将其垂直居中，但现在我通过jQuery添加div，例如：

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

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

问题是什么：

如果您还没有添加任何div，页面看起来很好（它垂直居中）。但是如果你开始添加div，那么.element div包含＆＃34; Hello＆＃34;被推到了顶峰。但我真正喜欢的是将其保留在原始位置，并将其他.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/

带有动态div的CSS垂直中心

1 个答案: