以绝对位置为中心
HTML:
<div class="wrapper">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>
CSS:
.wrapper{
position:relative;
height: 600px;
}
.wrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
如果你想将其他图像居中,那么你必须为该元素指定高度和宽度。
HTML:
<div class="wrapper">
<div class="child">
make me center
</div>
</div>
CSS:
.wrapper{
position:relative;
height: 600px;
}
.wrapper .child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 30px;
border: 1px solid #f00;
}