[CSS]讓div內的物件垂直、水平居中

梅干 2008/11/22 1 分鐘閱讀

　　使用過div的人都知道，當要將div內的物件垂直居中是一件不可能的任務，但用table便可輕鬆的作到，但為了專業的堅持，要怎麼才能讓div內的物件居中呢?還真讓梅干桑一夕間白了頭髮。

　
　　總算讓梅干桑頓悟到了其中的道理了，下列的範例中，為了讓各位可以更清楚的明白每一個容器範圍，特地的將每個區塊用不同的色框來作標示，現在就一起來看看該如何實現div內的物件水平垂直居中。

CSS語法：
[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;
}
[/css]

<body>….</body>之間：
[html]
<!–圖片垂直居中 –>
<div>
<img src="888.gif">
</div>
<!–文字垂直居中 –>
<div>
<span>文字垂直居中</span>
</div>
[/html]

[範例預覽]