水平居中布局解决方案

以下方案都是解决父元素、子元素宽度都未定时的水平居中布局

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不支持,兼容性较差。