CSS3新方法，文本居中显示

在CSS3之前有这样一个属性可以控制文本的显示效果

text-align : center
1
1

但实际前框并不是想象的那样，源码如下

<div style="    width: 100%;    height: 100px;     background-color: black;    text-align: center;    color: white;     font-size: 30px" >    this is title</div>
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

效果如下 
 
可以发现标题只是水平居中了，并没有垂直居中。

刚才说了那只是css3之前的方法，也就是说text-align:center只能对水平居中有效，不能垂直居中。

OK，CSS3新特性可以做到水平垂直居中，先看源码吧！

<div style="    width: 100%;    height: 100px;    background-color:    gray;color: white;    font-size: 30px;    display: -webkit-flex;    display: flex;    -webkit-align-items: center;    align-items: center;    -webkit-justify-content: center;    justify-content: center;"   >       this is title</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果如下 

在CSS3垂直居中方法如下：

display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;