文字实现水平垂直居中

阅读更多

文字实现水平垂直居中的关键代码：

  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;

由于flexbox是CSS3的一个新属性，目前支持的浏览器仅：IE10+, Firefox 2+, Chrome 4+, Safari 3.1+。其他实现方法，大家感兴趣可以参阅：《CSS制作图片水平垂直居中》和《CSS制作水平垂直居中对齐》两篇文章。

如需转载烦请注明出处： http://www.w3cplus.com/codes/vertically-center-content-with-css3.html