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

Question

我通常会使用绝对定位并将顶部设置为 50%，并使用负边距顶部( child 高度的一半)垂直居中。在这种情况下，这将不起作用，因为子元素的高度会发生变化。

那么有没有办法在不知道 child 高度的情况下使一个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%);
}