使用 flex - 垂直居中，除非内容高于容器 [重复]答案

【问题标题】：Using flex - center vertically unless content is taller than container [duplicate]使用 flex - 垂直居中，除非内容高于容器 [重复]
【发布时间】：2019-05-01 22:40:41
【问题描述】：

这是视口中心的一个框。只要盒子小于其容器的高度，它就会显示在垂直中心。当盒子更高时，它的顶部被隐藏并且无法滚动到。

    <!DOCTYPE html>
    <html style="height: 100%; ">
    <body style="height: 100%; ">
        <div style="display: flex;  justify-content: center; height: 100%;   ">
            <div style="align-self: center;  ">
                <div style="width:10vw; border: 3px solid blue; margin:10px; background-color:fuchsia;">abc</div>
            </div>
        </div>
    </body>
    </html>

现在将 div 的文本改为长：

<!DOCTYPE html>
<html style="height: 100%; ">
<body style="height: 100%; ">
    <div style="display: flex;  justify-content: center; height: 100%;   ">
        <div style="align-self: center;  ">
            <div style="width:10vw; border: 3px solid blue; margin:10px; background-color:fuchsia;">abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc</div>
        </div>
    </div>
</body>
</html>

并且无法看到框的顶部，也无法滚动到。

如何让它显示盒子的顶部，如果它比它的容器高，让我滚动到其余部分，如果它更短，那么它垂直居中？该方法不应假定内容的已知高度。内容可能是未知文本。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

overflow-y: auto;怎么样？

<!DOCTYPE html>
<html style="height: 100%; ">
<body style="height: 100%; ">
    <div style="display: flex;  justify-content: center; height: 100%; overflow-y: auto;">
        <div style="align-self: center;  ">
            <div style="width:10vw; border: 3px solid blue; margin:10px; background-color:fuchsia;">abc</div>
        </div>
    </div>
</body>
</html>

【讨论】：