不定宽高div水平垂直居中(兼容ie6)

Write By CS逍遥剑仙
我的主页: csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: sunjianfeng@csxiaoyao.com
QQ: 1724338257

不定宽高div水平垂直居中解决方法有很多，JS是最能够确保各种浏览器中一致性的，但是仍然可以使用CSS的方式来解决。

1. 水平居中

   margin:0 auto; 是最常用的让DIV容器居中的方法。margin作用于块级元素，而是否作用于其他内联元素因浏览器不同而不同，此处可能为内联元素，所以避免使用。
  text-align:center; 可以让绝大多数的对象居中对齐，并且这个属性也获得了几乎全部浏览器的支持。实际上，这个属性定义的是块级对象内部文字的对齐方式，内部的文字或者图像一般是内联对象。

2. 垂直居中

  垂直居中，对于固定高度的容器使用负margin的方法有效，对于高度不固定的情形使用 vertical-align 属性，它定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

3. 案例

css

#container_outer{
    display:table;
    overflow:hidden;
    _position:relative;
    width:600px;
    height:400px;
}   
#container_inner{
    vertical-align:middle;
    display:table-cell;
    text-align:center;
    _position:absolute;
    _top:50%;
    _left:50%;
    border:1px solid #000;
}   
#content{
    display:inline-block;
    _position:relative;
    _top:-50%;
    _left:-50%;
    border:1px solid #000;
}

html

<div id="container_outer">
    <div id="container_inner">
        <div id="content">
            动态内容...<br/>  
            动态内容...<br/>
            动态内容...
        </div>
    </div>
</div>