水平居中佈局解決方案

以下方案都是解決父元素、子元素寬度都未定時的水平居中佈局

1. inline-block + text-align

HTML部分:

<div class="parent">
    <div class="son"></div>
</div>
---------------------------------
CSS部分:

div.parent {
    text-align: center;  
    // 使其inline/inline-block子元素居中,但是也會導致文本內容居中顯示，所以會有下面的text-align

}
div.son {
    display: inline-block;  //使其寬度爲內容寬度,當然也可以自己再設置固定寬度
    text-align: left;  //使居中的文本居左
}
--------------------------------

此種方法的優點是兼容性很好,缺點就是父元素中的text-align: center會被繼承到子元素中,使其中的文本居中顯示,需要在子元素中添加額外的代碼:text-align:left
.

2. table + margin ( IE8 +)

HTML部分:

<div class="parent">
    <div class="son"></div>
</div>
----------------------------
CSS部分:

div.son {
    display: table; //table元素默認寬度爲內容寬度,也可以再單獨設置固定width
    margin: 0 auto; // table類似於塊級元素,使用該樣式實現水平居中
}
----------------------------

顯而易見,這種方法的優點是只需要設置子元素的樣式，

3. absolute + transform

HTML部分:

<div class="parent">
    <div class="son"></div>
</div>
----------------------------
CSS部分:

div.parent {
    position: relative;
}
div.son {
    position: absolute; //絕對定位元素的默認寬度是內容寬度,
    //當然也可以再設置成固定寬度
    left: 50%;   //元素左邊緣水平居中
    transform: translateX(-50%); //通過移動,使元素中心點水平居中
}
---------------------------
此種方式的優點是由於絕對定位的元素是脫離文檔流的，所以不會對其他元素的佈局產生影響。缺點:由於transform是CSS3中新增的屬性,所以IE6/7/8不支持,兼容性較差。