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

Question

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

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

所以它会像这样显示:

然而,当div中有更多内容时,视口中有高度,它会使内容溢出网页,使其不可见,并且无法向上滚动,如下所示:jsfiddle.net/xk1z6wpa/2

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

我怎么能做到这一点？

Answer 1

我认为你唯一的选择就是加入一点 JS。

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

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