<返回上一级
div元素宽度不定的情况下如何居中显示
htmlcss

最近由于工作的原因碰到一个问题,就是在一个弹窗宽度不定的情况下还能是该弹窗居中显示,思考许久未找到合适办法,于是在网上找到一些办法在此总结记录下来方便以后的学习。

方法一:兼容IE67,但是当元素宽度大于50%时,会出现滚动条。

<div class="father">
    <div class="child">这个是需要剧中的元素,宽度不确定</div>
</div>

.father {
    display: inlien-block; //使.father得宽度适应.child的宽度
    background-color: grey; // 方便看到.father元素
    position: relative;
    left: 50%;
}
.child {
    position: relative;
    left: -50%;
}

效果如下:

思路如下:
外层设置为float:left或者display:inline-block,然后设置相对定位,left:50%,这样左边位置就偏移到了中间的位置;然后内层设置相对定位,left:-50%,这样正好向左偏移自身宽度的一半,实现了居中。

方法二:兼容ie67

<div class="father">
    <div class="child">这个是需要剧中的元素,宽度不确定</div>
</div>

.father {
    text-align: center; //设置该属性是为了让.father里面的 **内联** 元素居中。
}
.child {
    display: inlne-block;
    border:1px solid red;
     *display: inline; /*主要用于激活IE中的hasLayout属性,兼容IE67*/
    *zoom:1; /*主要用于激活IE中的hasLayout属性,兼容IE67*/
}

效果如下:

思路如下:
外层使用text-align为center是为了让里面的内联元素居中,很显然在外层设置text-align:center后,我们让里面的元素变成内联元素即可,则可以对里面元素使用display:inline-block;*display:inline(兼容IE6-7)。

IE浏览器的hasLayout属性,参考:https://baike.so.com/doc/6747002-6961548.html
未知元素水平垂直居中,参考:http://demo.doyoe.com/css/alignment/, https://www.cnblogs.com/jogen/p/5213566.html