Question

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

    <!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>

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

如何显示框的顶部，如果框的高度高于容器，让我滚动到其余部分，如果框的长度短，则如何使其垂直居中？该方法不应假定内容的已知高度。内容可能是未知文本。

Answer 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>

使用flex-垂直居中，除非内容比容器高

1 个答案: