Question

我有一个<div>，它与以下CSS垂直居中：

.v-centered {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

只要它的高度预先不知道，它就会很好，如果屏幕太大，它的翻译就不会让它从屏幕顶部推出小。

我有一些javascript（使用jQuery）来缓解这种情况：

var $myDiv = $('#myDiv'),
    paddingTop = parseInt($('html').css('padding-top'));

window.onresize = () => {
    if ($myDiv.is('.v-centered')) {
        if ($myDiv.position().top < paddingTop) {
            $myDiv.removeClass('v-centered');
        }
    } else {
        if ($myDiv.height() < document.body.offsetHeight) {
            $myDiv.addClass('v-centered');
        }
    }
}

然而，这有点难看，并且在调整窗口更新的规模上，速度非常慢。我喜欢一种纯粹的CSS / HTML方法，或者没有这种方法，window.onresize函数没有做太多的计算。

jsFiddle

Answer 1

为什么不使用CSS定位方法进行垂直居中，为什么不使用flexbox，它可以执行未知，未定义或可变高度的垂直居中？ Flexbox是纯CSS，你可以废弃JS。

使用flexbox垂直居中子元素：

.parent {
    display: flex;
    align-items: center;
}

在child element overflows the container的情况下，可能需要一条规则来避免滚动限制。

.child {
    margin: auto;       /* for full vertical and horizontal centering */
 /* margin: auto 0; */  /* for vertical centering only */
 /* margin: 0 auto; */  /* for horizontal centering only */
}

DEMO

在此处了解有关使用flexbox进行垂直（和水平）居中的更多信息：

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。

在垂直居中的DIV

1 个答案: