CSS3实现水平垂直居中

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

       这次在iPhone项目中实现弹出窗口水平垂直居中，总不是很理想，后来采用了一种纯 CSS3 的实box方法实现水平垂直居中，现将实现的代码片段贴出与大家分享：

       HTML Markup

1. <div class="center">
   
2.   <img src="http://www.w3cplus.com/sites/default/files/source/webdesign.jpg" alt="" />
   
3. </div>
   
4. <div class="center">
   
5.   <div class="text">我就一行文字</div>
   
6. </div>
   
7. <div class="center">
   
8.   <div class="text">
   
9.     我是多行文字<br />
   
10.     我是多行文字
    
11.   </div>
    
12. </div>

复制代码

       CSS Code

1. .center {
   
2.   width: 300px;
   
3.   height: 200px;
   
4.   padding: 10px;
   
5.   border: 1px solid #ccc;
   
6.   margin: 20px auto;
   
7.   display: -webkit-box;
   
8.   -webkit-box-orient: horizontal;
   
9.   -webkit-box-pack: center;
   
10.   -webkit-box-align: center;
    
11.   display: -moz-box;
    
12.   -moz-box-orient: horizontal;
    
13.   -moz-box-pack: center;
    
14.   -moz-box-align: center;
    
15.   display: -o-box;
    
16.   -o-box-orient: horizontal;
    
17.   -o-box-pack: center;
    
18.   -o-box-align: center;
    
19.   display: -ms-box;
    
20.   -ms-box-orient: horizontal;
    
21.   -ms-box-pack: center;
    
22.   -ms-box-align: center;
    
23.   display: box;
    
24.   box-orient: horizontal;
    
25.   box-pack: center;
    
26.   box-align: center;
    
27. }
    
28. .center img,
    
29. .text {
    
30.   border: 1px solid #dedede;
    
31.   padding: 2px;
    
32. }

复制代码

       效果：

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

1. display: -webkit-box;
   
2.   -webkit-box-orient: horizontal;
   
3.   -webkit-box-pack: center;
   
4.   -webkit-box-align: center;
   
5.   display: -moz-box;
   
6.   -moz-box-orient: horizontal;
   
7.   -moz-box-pack: center;
   
8.   -moz-box-align: center;
   
9.   display: -o-box;
   
10.   -o-box-orient: horizontal;
    
11.   -o-box-pack: center;
    
12.   -o-box-align: center;
    
13.   display: -ms-box;
    
14.   -ms-box-orient: horizontal;
    
15.   -ms-box-pack: center;
    
16.   -ms-box-align: center;
    
17.   display: box;
    
18.   box-orient: horizontal;
    
19.   box-pack: center;
    
20.   box-align: center;

复制代码

       由于flexbox是CSS3的一个新属性，目前支持的浏览器仅：IE10+, Firefox 2+, Chrome 4+, Safari 3.1+。