盒子模型中的div居中

說到居中的問題，或許大多數童鞋都會想到text-align:center; margin:0 auto; vertical-align:middle; line-height:height; ……的確，這些屬性在某種程序上能夠達到居中的效果。可是否是適用於每一種狀況呢？咱們先來溫習一下這些個屬性值的用處。
    text-align:center;                    行內元素的水平居中顯示；
    margin:0 auto;                       固寬盒子在瀏覽器中的居中顯示效果；
    vertical-align:middle;             行內元素的垂直居中顯示；
    line-height:height;                 針對於單行文字垂直居中顯示；

====================================

HTML:

<div class="A">
     <div class="B">測試</div>
</div>

----------------------------------

CSS:

第一種方法：（經常使用）
.A{  position: relative;  height:500px; width:500px; background-color:#FF0000;}
.B{  position: absolute; top:50%; left:50%; height:250px; width:250px; background-color:#FFF;  margin:-125px 0 0 -125px;  }


第二種方法：
.A{  position: relative;  height:500px; width:500px; background-color:#FF0000;  overflow:hidden; }
.B{  position: relative;  height:250px; width:250px; background-color:#FFF;  margin:-125px auto 0; top:250px; }


第三種方法：(IE有點問題)
.A{  position: relative;  height:500px; width:500px; background-color:#FF0000; }
.B{  position: absolute;  height:250px; width:250px; background-color:#FFF;  margin:auto; top:0; left:0; bottom:0;  right:0; }


第四種方法：(用到CSS3,不考慮IE，只在火狐作了測試，其餘可加前綴)
.A{ position:relative;  height:500px; width:500px; background-color:#FF0000; display:-moz-box; -moz-box-pack: center; -moz-box-align:center; }
.B{height:250px; width:250px; background-color:#FFF;}

第五種方法：(IE6/7兼容)
.A{  display:table-cell; height:500px;width:500px;background-color:#FF0000; vertical-align: middle;text-align: center;
*font-size:438.6px;/*font-size的值爲該父元素的高度除以1.14獲得的值,即500/1010=438.6*/ }
.B{  display:inline-block; height:250px; width:250px; background-color:#FFF; 
*display:inline; *zoom:1;/*ie6/7實現inline-block*/
*vertical-align: middle;
font-size:12px;/*恢復正常字體大小*/ }