div元素寬度不定的狀況下如何居中顯示

本文轉載於:猿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