文字实现水平垂直居中的关键代码:
由于flexbox是CSS3的一个新属性,目前支持的浏览器仅:IE10+, Firefox 2+, Chrome 4+, Safari 3.1+。其他实现方法,大家感兴趣可以参阅:《CSS制作图片水平垂直居中》和《CSS制作水平垂直居中对齐》两篇文章。
如需转载烦请注明出处: http://www.w3cplus.com/codes/vertically-center-content-with-css3.html
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