本文共 1582 字，大约阅读时间需要 5 分钟。

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

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

HTML Markup

   
  
    
   
   
  
    
     我就一行文字
    
   
   
  
    
         我是多行文字
     
    我是多行文字  
    
   

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+。其他实现方法，大家感兴趣可以参阅：《》和《》两篇文章。

如需转载烦请注明出处：