在垂直居中的 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函数。

js小提琴

Answer 1

与其使用

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

要使用弹性框使子元素垂直居中，请使用：

.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 */
}

演示

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

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

---

请注意，除IE 8和9之外，所有主流浏览器都支持flexbox。某些最新的浏览器版本（如 Safari 8 和 IE10）需要供应商前缀。要快速添加所需的所有前缀，请在左侧面板中发布您的 CSS：自动前缀器。