CSS3如何实现水平垂直居中？

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

前面在CSS制作图片水平垂直居中》和《CSS制作水平垂直居中对齐》两篇文章中和大家一起探讨过多种实现方法，以及兼容ie浏览器。这次在iPhone项目中实现弹出窗口水平垂直居中，总不是很理想，后来采用了一种纯CSS3的实box方法实现水平垂直居中，现将实现的代码片段贴出与大家分享：

HTML Markup

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

CSS Code

1. .center{
2. width:300px;
3. height:200px;
4. padding:10px;
5. border:1pxsolid#ccc;
6. margin:20pxauto;
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. .centerimg,
29. .text{
30. border:1pxsolid#dedede;
31. padding:2px;

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

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;