使用過div的人都知道，當要將div內的物件垂直居中是一件不可能的任務，但用table便可輕鬆的作到，但為了專業的堅持，要怎麼才能讓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]
[範例預覽]