摘要 今天小编跟大家讲解下有关div元素宽度不定的情况下如何居中显示 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关div元素宽度

今天小编跟大家讲解下有关div元素宽度不定的情况下如何居中显示 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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>这个是需要剧中的元素，宽度不确定</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)。

来源：爱蒂网