Question

我通常会使用绝对定位并将顶部设置为50％，并使用负边距 - 顶部（儿童身高的一半）垂直居中。在这种情况下，由于子元素的高度会有所不同，因此无效。

那么有没有办法在div中垂直居中div而不知道孩子的身高？

Answer 1

以下jquery函数垂直居中，假设您定位的项目已经是绝对位置且父位置相对

$.fn.vAlign = function () {
    return this.each(function () {
        $(this).css('top', '50%').css('margin-top', -Math.ceil($(this).height() / 2) + "px");
    });
};

查看行动 - http://jsfiddle.net/vqbMU/2/

<强>更新

支持css转换的浏览器的纯CSS解决方案（IE9 +）http://caniuse.com/#search=transform

.align-v {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Answer 2

您可以使元素显示：table-cell并put vertical-align：center。我通常不建议使用display：table-但这是我认为最简单的解决方案

Answer 3

你也可以使用JavaScript动态地轻松抓住孩子的身高，甚至可以使用像jQuery这样的JS库轻松抓住孩子的身高。

根据你的个人资料，你对jQuery有一定的了解，所以我会建议这条路线。如果您需要帮助，请告诉我。

Answer 4

使用填充顶部，填充底部垂直居中元素，有或没有高度定义...

在不知道CSS高度的情况下垂直对齐？

4 个答案: