CSS, CSS2

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

梅干2008/11/23
  使用過div的人都知道,當要將div內的物件垂直居中是一件不可能的任務,但用table便可輕鬆的作到,但為了專業的堅持,要怎麼才能讓div內的物件居中呢?還真讓梅干桑一夕間白了頭髮。     總算讓梅干桑頓悟到了其中的道理了,下列的範例中,為了讓各位可以更清楚的明白每一個容器範圍,特地的將每個區塊用不同的色框來作標示,現在就一起來看看該如何實現div內的物件水平垂直居中。

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;   
}

<body>....</body>之間:
<!--圖片垂直居中 -->
<div>
 <img src="888.gif">
</div>
<!--文字垂直居中 -->
<div>
<span>文字垂直居中</span>
</div>

[範例預覽]
UAG軍規iPhone防摔殼