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