Bootstrap Skeleton
This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="span6" style="background: red; ">Block 1 - Vertically center me please!
<br />The height
<br />of this div
<br />is calculated
<br />based on the height
<br />of its content
<br />
</div>
<div class="span6" style="background: blue; color: #FFF; ">Block 2- Center me too
<br />
<< Same for this div </div>
</div>
</div>
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
body, html {
height: 100%;
}
.container {
margin-top: 10px;
display: table;
height: 100%;
}
.row {
min-width: 960px;
display: table-cell;
height: 100%;
vertical-align:middle;
}