css - 垂直对齐 div 和适当的滚动溢出，这可能吗？

Question

我发现我可以同时拥有其中之一，但似乎无法同时拥有两者。

我的HTML如下:

<div id="middle">
    <div id="middleinner"></div>
</div>

CSS 有点像这样(z-indexes 为页面上的其他内容设置，因为它不相关而被遗漏在这里，另外还有一些注释掉的东西，因为我在进行过程中试图弄清楚) :

html, body{
        font-family: helvetica, sans-serif;
        font-size: 1em;
        height: 100%;
        overflow: hidden;
}

#middle{
/*      display: table;*/
        display: table;
        height: 80%;
        width: 90%;
/*      position: fixed;*/
        position: absolute;
        top: 10%;
        left: 5%;
        right: 95%;
        bottom: 90%;
        color: #000;
        z-index: 0;
}

#middleinner{
        padding: 0.5em 1em 0.5em 1em;
        background-color: #F9F9F9;
        display: table-cell;
/*      display: inline-block;*/
        border-radius: 1.5em;
        vertical-align: middle;
/*      margin-left: auto;
        margin-right: auto;*/
        text-align: center;
/*      position: relative;*/
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: auto;
        z-index: 20;
}

无论如何，如果我将 middleinner 的位置更改为相对而不是绝对，我将以适当的溢出处理为代价获得垂直对齐。如果我将它设置为绝对，我将以垂直对齐为代价获得适当的溢出处理。

有没有纯 CSS 的方法可以处理这个问题？

Answer 1

是的，line-height、inline-block 和 vertical-align 的组合可以做到这一点。

#middle {
    width: 80%;
    margin: 10px auto;
    border: 1px dashed black;
    height: 500px;
    line-height: 500px;
    vertical-align: middle;
    text-align: center;
}
#inner {
    height: 50px;
    width: 80%;
    overflow: auto;
    display: inline-block;
    line-height: 1.1em;
}

Demo

要使其与动态高度元素一起使用，您必须使用一些 JavaScript，因为您使用的是 jQuery，我将使用它。也完全可以为此使用 vanilla JS。

resize = function(el) {
    el.css({lineHeight: el.height() + "px"})
};
$(document).ready(function() {
    var $middle = $("#middle");
    resize($middle);
    $(window).on("resize", function() {
        resize($middle);
    })
})