css 中 div垂直居中的方法

在说到这个问题的时候，也许有人会问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一般不再考虑的范围内。

巴特西

css 中 div垂直居中的方法

最新文章

热门文章