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便可