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;

}