除非内容溢出视口，否则居中对齐 flexbox 容器答案

【问题标题】：Center align flexbox container unless content overflows viewport [duplicate]除非内容溢出视口，否则居中对齐 flexbox 容器
【发布时间】：2016-03-18 19:40:03
【问题描述】：

要使用 flexbox 垂直和水平居中 div，我只需将这些规则应用到它的父级

display: flex;
align-items: center;
justify-content: center;

这样就可以显示出来了：

但是，当 div 中的内容多于视口中的高度时，它会使内容溢出网页，因此它不可见，并且无法向上滚动 - 就像这样：jsfiddle.net/xk1z6wpa/2

我需要 div 不会从顶部溢出网页，而是在到达它之前停止，因此只会从底部溢出 - 就像这样：

我怎样才能做到这一点？

【问题讨论】：

你能分享一个代码示例吗？但它工作正常：jsfiddle.net/xk1z6wpa/1
@ManojKumar 更新了您的示例 jsfiddle.net/xk1z6wpa/2
flexbox 有必要吗？在我看来，这最好通过其他方式来实现。
@Harangue 在没有 flexbox 的情况下垂直居中动态内容是一个巨大的痛苦。如果可能的话，最好使用 flexbox。
@Harangue，这将不起作用，并导致与我的图像中记录的相同的问题。

标签： html css flexbox

【解决方案1】：

我认为你唯一的选择是throw a little JS in。

$(".content").css({
  'margin-top': Math.max($(".content").height() - $(window).height(), 0)
})

这会将内容推到页面顶部，除非它会导致负边距，此时表达式的计算结果为 0。

【讨论】：