絕對定位的方式讓文字或圖片垂直居中、水平居中
CSS代碼如下:
以下是代碼片段：
div {
width:300px;
height:300px;
border:1px solid #c00;
position:relative; /*to IE*/
display:table-cell;
text-align:center;
vertical-align:middle; /*to firefox*/
}
div p {
position:static !important;
position:absolute;
top:50%; /*讓IE上空出50%*/
border: 1px solid #CCCCCC;
}
div p img {/*讓img在div中居中*/
position:static !important;
position:relative;
top:-50%; /*IE向上-50%*/
left:-50%; /*IE向左-50%*/
border: 2px solid #0099CC;
}
div p span {/*讓文字在div中居中*/
position:static !important;
position:relative;
top:-50%; /*IE向上-50%*/
left:-50%; /*IE向左-50%*/
border: 2px solid #0099CC;
}
內容如下:
以下是代碼片段：
<!–圖片垂直居中 –>
<div><p>
<img src="http://www.poluoluo.com/poimg/2008logo.gif" />
</div></p>
<!–文字垂直居中 –>
<div><p>
<span>文字垂直居中</span>
</div></p>