CSS3新方法,文本居中显示


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

  • 1
  • 1
但实际前框并不是想象的那样,源码如下
this is title

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
效果如下
CSS3新方法,文本居中显示
文章图片

可以发现标题只是水平居中了,并没有垂直居中。
刚才说了那只是css3之前的方法,也就是说text-align:center只能对水平居中有效,不能垂直居中。
OK,CSS3新特性可以做到水平垂直居中,先看源码吧!
webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; " > this is title

  • 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新方法,文本居中显示】 效果如下
CSS3新方法,文本居中显示
文章图片

在CSS3垂直居中方法如下:
display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;


    推荐阅读