如果隻是水(shuǐ)平方向居中的(de)話(huà),用(yòng)text-align:center;(火狐中用(yòng)margin:0 auto;)這(zhè)個(gè)屬性就可(kě)以了(le)。但是,垂直方向的(de)居中好像很難做(zuò)到,無論是用(yòng)css裏的(de)"vertical-align:middle;",還(hái)是用(yòng)img的(de)align="absmiddle",圖片在垂直方向似乎都無動于衷。
發現了(le)如下(xià)一個(gè)方法,做(zuò)個(gè)收藏。
樣式部分(fēn):
.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部分(fēn):
<div class="middle-out">
<div class="middle-in">
<img src="/image/logo.jpg" />
</div>
</div>