在垂直居中的DIV上设置最小顶部

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 {
    margin: auto;       /* for full vertical and horizontal centering */
 /* margin: auto 0; */  /* for vertical centering only */
 /* margin: 0 auto; */  /* for horizontal centering only */
}

演示版

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

• 如何在 Flexbox 中垂直和水平居中元素
• 如何将未知高度的div垂直和水平居中
• 无法滚动到溢出容器的弹性项目的顶部

请注意，除了 IE 8 和 9 之外，所有主要浏览器都支持 Flexbox 。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。要快速添加所需的所有前缀，请将 CSS 发布到此处的左侧面板中：Autoprefixer。