CSS3实现水平垂直居中

水平垂直居中的制作大家都有碰到过，水平居中方法好处理，但是垂直居中的话还是让很多人头痛过，我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片，单行文本和多行文本实现各种浏览器的水平垂直居中的方案。

前面在《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