css3文字水平垂直居中对齐的几种方法

1.使用绝对定位：

.div{

position:absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

2.flex布局：

.parent{

Justify-content:center;  // 子元素水平居中

align-items:center;       //子元素垂直居中

display:-webkit-flex;

}

3.使用 -webkit-box（注：

目前没有浏览器支持 box-align 属性。

Firefox 支持替代的 -moz-box-align 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性

）

.innerDisplay{

display:-webkit-box;

display:-webkit-flex;

display:flex;

-webkit-box-align:center;

-webkit-align-items:center;

}