Reputation: 7855
Using Bootstrap 3.0.3, I'm attempting to center both horizontally and vertically a div with a hard-coded width and height. The JSFiddle has the latest code in it, also reported here to be consistent with SO's rules regarding JSFiddle.
http://jsfiddle.net/alex_kurilin/pNYg9/
The HTML:
<div class="text-center full-height">
<div class="inline full-height">
<div class="fake-table full-height">
<div class="fake-table-cell full-height">
<div class="content fake-table">
<div class="fake-table-cell">foobar</div>
</div>
</div>
</div>
</div>
</div>
The CSS:
html, body {
height: 100%;
}
.fake-table {
display: table;
}
.fake-table-cell {
display: table-cell;
vertical-align: middle;
}
.inline {
display: inline-block;
}
.text-center {
text-align: center;
}
.full-height {
height: 100%;
}
.content {
background-color: grey;
width: 300px;
height: 150px;
}
What I'm showing in the JSFiddle appears to "work", however for some reason it adds a vertical scrollbar. What's interesting is that changing the body's font-size
, font-family
and line-height
appears to affect the scrollbar, and thus I imagine this has something to do with the height: 100%
and the inline-block
div.
I'd love a pointer on two on how to make this specific layout happen correctly, as I suspect I'm doing this the hard way.
Upvotes: 1
Views: 94
Reputation: 5641
why not just use content element and remove others:
.content {
background-color: grey;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -75px;
width: 300px;
height: 150px;
}
Upvotes: 1