通过box盒子模型给元素内容设置居中

老版本语法

div{

display: -webkit-box;
-webkit-box-align:center; //垂直居中
-webkit-box-pack:center;//水平居中

}

 

新版本语法

div{

display: -webkit-flex;

-webkit-align-items: center;

align-items: center;//垂直居中

-webkit-justify-content: center;

justify-content: center;//水平居中

}

 

混合版本语法

div{

display: -ms-flexbox; /* 混合版本语法: IE 10 */

 -ms-flex-pack: center; //水平居中

-ms-flex-align: center; //垂直居中

}