css 内容垂直居中

http://www.html5cn.org/article-2837-1.html

 

1   设置display:table-cell属性(ie不支持该属性)

HTML:

<div id="container"> 

    <div id="content">content</div> 

</div>

 

CSS:

            #container { 

            height: 300px; 

            display: table;/*让元素以表格形式渲染*/ 

        } 

             #content { 

            display:table-cell;/*让元素以表格的单元素格形式渲染 非IE的主流浏览器识别的垂直居中的方法*/ 

            vertical-align: middle;/*使用元素的垂直对齐  非IE的主流浏览器识别的垂直居中的方法*/ 

        }         

 

 

 

 

 

 

 

 

2 兼容ie的方法

标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。 

那么为了解决这种方法在IE6-7的兼容，需要额外增加一个div，并使用hack，下面我们一起来看看其解决办法。

非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。

HTML:

    <div class="table"> 
        <div class="tableCell"> 
            <div class="content">content</div> 
        </div> 
    </div>

CSS:

    .table { 
        height: 300px;/*高度值不能少*/ 
        width: 300px;/*宽度值不能少*/ 
        display: table; 
        position: relative; float:left; 
}           

    .tableCell { 
        display: table-cell; 
        vertical-align: middle; 
        text-align: center;          
         padding: 10px;
         *position: absolute; 
        *top: 50%; 
        *left: 50%; 
} 
    .content { 
        *position:relative; 
        *top: -50%; 
        *left: -50%; 
}