div元素宽度不定的情况下如何居中显示

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

方法一：兼容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

• 还没有人评论，欢迎说说您的想法！

相关课程

Web前端页面制作快速入门

5492 9.8元

HTML5网页标签

3955 0元 限免

云知梦-HTML5网页标签

4616 0元 限免