CSS将div内容垂直居中案例总结

CSS中实现元素的垂直居中，几乎是每个前端开发者都会遇到的经典问题。虽然方法五花八门，但不同场景下总有一款最合适。这里整理了几种常用且有效的方案，从最简单的单行文字到复杂的多行内容，覆盖了常见需求。

一、行高（line-height）法

如果只需要垂直居中一行或几个文字，那这个方法最简单粗暴——让文字的行高等于容器的高度就行。比如：

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

这段代码就能让段落里的文字在垂直方向完美居中。注意要加上 overflow:hidden，防止内容溢出。

二、内边距（padding）法

跟行高法思路类似，但更灵活一些。它同样适合一行或几行文字，核心是利用 padding 把内容“撑”到中间：

p { padding:20px 0; }

效果和行高法差不多，但不需要固定高度，容器高度由内容决定。不过如果容器高度固定，可能需要配合其他方式。

三、模拟表格法

这个方法利用了表格的 vertical-align 特性，把容器变成表格，子元素变成表格单元格，然后垂直居中就自然实现了。具体结构如下：

    
        
测试垂直居中效果测试垂直居中效果
        
测试垂直居中效果测试垂直居中效果
    

CSS 代码：

#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;}#cell{display:table-cell; vertical-align:middle;}

效果如图所示：

遗憾的是，IE7 及以下版本不支持 display:table-cell，不过现在这类浏览器已经很少见了。

四、CSS3的transform来实现

利用 CSS3 的 translate 配合 position:relative，可以做到不受容器高度限制的垂直居中：

.center-vertical{  position: relative;  top:50%;  transform:translateY(-50%);}.center-horizontal{  position: relative;  left:50%;  transform:translateX(-50%); }

这种方法的好处是：不需要知道容器和子元素的具体尺寸，适用范围广。但要注意，transform 会创建新的层叠上下文，可能会影响 z-index。

五：css3的box方法实现水平垂直居中

CSS3 早期引入的 box 模型（Flexbox 的前身）也能实现，不过需要写大量浏览器前缀。HTML 结构如下：

  
    
我是多行文字
    
我是多行文字
    
我是多行文字
  

CSS 代码：

.center {  width: 300px;  height: 200px;  padding: 10px;  border: 1px solid #ccc;  background:#000;  color:#fff;  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;}

结果如图：

现在来看，这个方案已经过时了，但了解它的思路对理解 Flexbox 的演进有帮助。

六：flex布局（2018/04/17补充）

最后，也是目前最推荐的方式——Flexbox 布局。简单、强大，而且现代浏览器支持良好。HTML 结构：

    
       
我是多行文字我是多行文字我是多行文字我是多行文字
      
我是多行文字我是多行文字我是多行文字我是多行文字
    

CSS 代码：

.flex{    /*flex 布局*/    display: flex;    /*实现垂直居中*/    align-items: center;    /*实现水平居中*/    justify-content: center;        text-align: justify;    width:200px;    height:200px;    background: #000;    margin:0 auto;    color:#fff;}

实现效果：

一行 display: flex 加上两个属性就搞定，既能垂直居中又能水平居中，而且对多行文本也完全有效。在实际项目中，这已经是最常用的方案了。