css 中 div垂直居中的方法

Posted 2020-06-18 改变需要勇气，习惯需要坚持。

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS

Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)html元素中拥有valign特性的元素才生

效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起

作用。

 

单行垂直居中 

如果一个容器只有一行文字，那比较简单，设置的方法就是 所在行的高度line-height和实际高度height的值相等即可

例如：

<div class="div1">单行文本的垂直居中，只需设定height和line-height的值一样即可</div>

对应设置的css为：

 .div1 {
            border: 1px red solid;
            height: 25px;
            line-height: 25px;
            overflow: hidden;
        }

 

多行未知高度文字的垂直居中

这种情况可以通过padding的值相同来实现文字垂直居中的效果

例如： 

 <div class="div2">多行未知高度的文字垂直居中，只需要设定padding值相同即可</div>

对应的css：

.div2 {
         padding: 25px;
         border: 1px blue solid;
         width: 300px;            
        }

 

多行文本固定高度垂直居中

在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display

属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和

display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

例如：

<div class="div3">
     <div class="content">多行文字实现垂直居中，可以模拟table中的vertical-align属性，需要注意display:table和display:table-cell的使用方法
            ，display:table用于设置在父元素上，display:table-cell，必须设置在子元素上
     </div>
</div>

对应的css为：

      .div3 {
            display: table;
            height: 100px;
        }        
        .content {
            display: table-cell;
            vertical-align: middle;
            border: 1px solid green;
            width: 400px;
        }

这种方式在IE6下不起作用，Internet Explorer 6 并不能正确地理解display:table和display:table-cell，所以在IE6下可以通过绝对定位来实现，但是IE6一般不再考虑的范围内。