Although it requires an additional .wrapper
, this layout is doable with display: table;
and friends:
html
<div class="container">
<div class="top">some space</div>
<div class="wrapper">
<div class="content">
<div style="height: [any height]">centered content</div>
</div>
</div>
</div>
css
.container {
display: table;
width: 100%;
height: 100%;
}
.top {
height: 100px;
display: table-row;
}
.wrapper {
/* this will take up remaining height (or stretch to content) */
display: table-row;
}
.content {
/* because this is displayed as a table cell, the vertical align centers
* its content (instead of how it usually works on inline elements) */
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/gLECE/3/
UPDATE
The above will center content between the top 100px and the bottom as opposed to between the viewport top and bottom (a hacky way to do this with css is http://jsfiddle.net/gLECE/6/ but ToniTornado's answer is a solid workaround)
@TCHdvlp's attempt is close, but missing some essential parts (missing top space, and actually not quite centering).
Working, edited version of TCHdvlp's script:
var height = $(document.body).height();
$(".dca").each(function(){
if(($(this).height()+100) < height){
$(this).css({top: '50%', marginTop: - $(this).height() / 2 });
}
});
http://jsfiddle.net/gLECE/6/
Note: you probably want to do this not only on page load, but also when the window is resized.
position:relative
and js to settop
. While DCA.height()+100 <= container.height, set DCAtop
at (container.height - DCA.height). Otherwise,top
is 0, so the DCA will be attached to the top of the container, assuming the container starts at the "Content can't pass this height" line. Let me try in a jsfiddle and edit my post.max-height
, but I didn't have any luck!