css3 實現元素水平和垂直居中

最近在用html5 寫一些 移動前端頁面

一開始對html5宣稱的不少特性很是興奮 。

結果然正用起來得時候，卻很是失望，由於不少新屬性必需要加瀏覽器前綴

 

一致期盼html5能帶來儘量的瀏覽器兼容

 

看來狀況卻更加惡化了。怪不得facebook 要放棄html5 的方式而使用app作客戶端

 

由於使用了最新的盒子模型：-webkit-box

 

而要實現起來 其內部元素居中則須要在父層元素這麼寫：

<del>/* Firefox */
    display:-moz-box;
    -moz-box-pack:center;/*實現水平居中*/
    -moz-box-align:center;/*垂直居中，不須要刪除便可*/


    /* Safari、Opera 以及 Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;<span style="font-family: Arial, Helvetica, sans-serif;">/*實現水平居中*/</span>
    -webkit-box-align:center;<span style="font-family: Arial, Helvetica, sans-serif;">/*垂直居中，不須要刪除便可*/</span>


    /* W3C */
    display:box;
    box-pack:center;<span style="font-family: Arial, Helvetica, sans-serif;">/*實現水平居中*/</span>
    box-align:center;<span style="font-family: Arial, Helvetica, sans-serif;">/*垂直居中，不須要刪除便可*/</span></del>

 

 

這就是 html5 爲咱們帶來的 「方便」？

 

仍是我尚未入門？

 

好吧，是我沒搞明白，由於使用過display:box 屬性後， 該容器則定義爲了內聯元素，使用margin:0px auto讓其居中是無效的，要想使其居中只能經過它的父容器的text-align:center便可