最近由於工作的原因碰到一個問題，就是在一個彈窗寬度不定的情況下還能是該彈窗居中顯示，思考許久未找到合適辦法，於是在網上找到一些辦法在此總結記錄下來方便以後的學習。 方法一： 相容IE67，但是當元素寬度大於50%時，會出現滾動條。 這個是需要劇中的元素，寬度不確定 .father { display ...
最近由於工作的原因碰到一個問題，就是在一個彈窗寬度不定的情況下還能是該彈窗居中顯示，思考許久未找到合適辦法，於是在網上找到一些辦法在此總結記錄下來方便以後的學習。
方法一：相容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
