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

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

不定宽高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> 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券