垂直對齊div和正確的滾動溢出，這可能嗎？

Question

我發現我可以有一個或另一個，但似乎無法弄清楚兩者。

我的HTML如下：

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

而CSS去有點像在頁面上別的東西設置這個（Z-指標，在這裏留下了，因爲它是不相關的，再加上有一些評論說出來的東西，我想弄清楚，我就跟着去了）：

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); 
    }) 
})