Vertically aligning a div and proper scrolling overflow, is this possible? - css

Question

I've discovered that I can have one or the other, but can't seem to figure out both.
My HTML is as follows:
<div id="middle">
<div id="middleinner"></div>
</div>
And the CSS goes a little something like this (z-indexes set for something else on the page, left out here because it's irrelevant, plus there's a few commented out things as I tried to figure it out as I went along):
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;
}
Anyway, if I change middleinner's position to relative instead of absolute, I've got vertical alignment at the cost of proper overflow handling. If I set it to absolute, I've got proper overflow handling at the cost of vertical alignment.
Is there a pure-CSS way that I can handle this?

Answer 1

Yes, a combination of line-height, inline-block, and vertical-align can do it.
#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
To have it work with a dynamic height element, you'll have to use some JavaScript, since you're using jQuery, I'll go with that. It's perfectly possible to use vanilla JS for this one too.
resize = function(el) {
el.css({lineHeight: el.height() + "px"})
};
$(document).ready(function() {
var $middle = $("#middle");
resize($middle);
$(window).on("resize", function() {
resize($middle);
})
})