css垂直居中

在css中水平居中很好实现，但是垂直居中某些情况就会有一定的难度，这篇随笔对垂直居中的几种情况作了总结

一、单行内容的居中

只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了

demo1：

.demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}

overflow: hidden;作用：保证布局的完整性

二、多行内容居中，且容器高度可变
也很简单，给出一致的 padding-bottom 和 padding-top 就行

demo2：

.demo-2{
padding-top: 24px;
padding-bottom: 24px;
}

三、多行内容居中，且容器高度固定

把容器当作表格单元，CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。

demo3：

.demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}

可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。
要注意的是：和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。

对于IE中的问题可以用一下方法解决

.demo-4{
height: 300px;
position: relative;
}
.middle-demo-4 div{
position: absolute;
top: 50%;
left: 0;
}
.middle-demo-4 div div{
position: relative;
top: -50%;
left: 0;
}

整合三和四，写出支持所有浏览器的垂直居中容器！

demo5：

<style type="text/css">

    .box {display:table; *position: relative;width: 500px; height: 300px;border: 1px solid #FFF; background-color: #999; }

   .wrap {display:table-cell;vertical-align:middle; *position:absolute; top: 50%; left: 0; }

   .content { *position: relative; top: -50%; left: 0;  }

</style>

 <div class="box">

            <div class="wrap">

                <p class="content">

                   display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7却不支持，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。

        </p>

            </div>

        </div>

        <div class="box">

            <div class="wrap">

                <p class="content">

                   与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

                </p>

            </div>

        </div>