CSS 大小不确定图片垂直居中
发布时间 | 2018/4/2 点击 | 次
如果只是水平方向居中的话,用text-align:center;(火狐中用margin:0 auto;)这个属性就可以了。但是,垂直方向的居中好像很难做到,无论是用css里的"vertical-align:middle;",还是用img的align="absmiddle",图片在垂直方向似乎都无动于衷。
发现了如下一个方法,做个收藏。
样式部分:
.middle-out{
width: 600px;
height: 385px;
position: relative;
display: table-cell;
vertical-align: middle;
text-align:center;
border: 1px solid #f00;
}
.middle-in{
position: static;
*position:absolute;
top:50%;
}
.middle-out .middle-in img{
position:static;
*position:relative;
top:-50%;
left:-50%;
}
HTML部分:
<div class="middle-out">
<div class="middle-in">
<img src="http://www.021jz.com.cn/image/logo.jpg" />
</div>
</div>