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

Question

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

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

这样它就会显示出来：

然而，如果div中有更多内容，那么视口中有高度，它会使内容溢出网页，使其不可见，并且无法向上滚动，如下所示：{{ 3}}

jsfiddle.net/xk1z6wpa/2

我需要div不要从顶部溢出网页，而是在到达之前停止，因此只能从底部溢出 - 所以：

我该如何做到这一点？

Answer 1

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

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

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