This approach works perfectly for dynamic content of unknown dimensions.
jsFiddle example
Basically, we are using vertical-align:middle
for vertical centering, and text-align:center
for horizontal centering. In order for vertical-align:middle
to work on a div
, we need to set the parent elements to display:table
, and the targeted child div
to display:table-cell
. Sure you could achieve such centering with absolute
positoning, however, that would require you to know the dimensions of the img
. This approach works for unknown dimensions.
HTML
<div class="container">
<div class="box">
<img src="http://placehold.it/200x200">
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0px;
}
.container {
display:table;
vertical-align:middle;
text-align:center;
height:100%;
width:100%;
}
.box {
display:table-cell;
vertical-align:middle;
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…