水平垂直居中的制作大家都有碰到过,水平居中方法好处理,但是垂直居中的话还是让很多人头痛过,我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片,单行文本和多行文本实现各种浏览器的水平垂直居中的方案。
前面在《CSS制作图片水平垂直居中》和《CSS制作水平垂直居中对齐》两篇文章中和大家一起探讨过多种实现方法,以及兼容ie浏览器。这次在iPhone项目中实现弹出窗口水平垂直居中,总不是很理想,后来采用了一种纯CSS3的实box方法实现水平垂直居中,现将实现的代码片段贴出与大家分享:
HTML Markup
<div class="center"> <img src="http://www.w3cplus.com/sites/default/files/source/webdesign.jpg" alt="" /> </div> <div class="center"> <div class="text">我就一行文字</div> </div> <div class="center"> <div class="text"> 我是多行文字<br /> 我是多行文字 </div> </div>
CSS Code
.center { width: 300px; height: 200px; padding: 10px; border: 1px solid #ccc; margin: 20px auto; 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; } .center img, .text { border: 1px solid #dedede; padding: 2px; }
效果:
实现水平垂直居中的关键代码:
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