本文转载于:猿2048网站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