以下方案都是解决父元素、子元素宽度都未定时的水平居中布局
1. inline-block + text-align
HTML部分:
<div class="parent">
<div class="son"></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>
CSS部分:
div.son {
display: table; //table元素默认宽度为内容宽度,也可以再单独设置固定width
margin: 0 auto; // table类似于块级元素,使用该样式实现水平居中
显而易见,这种方法的优点是只需要设置子元素的样式,
HTML部分:
<div class="parent">
<div class="son"></div>
CSS部分:
div.parent {
position: relative;
}
div.son {
position: absolute; //绝对定位元素的默认宽度是内容宽度,
//当然也可以再设置成固定宽度
left: 50%; //元素左边缘水平居中
transform: translateX(-50%); //通过移动,使元素中心点水平居中
此种方式的优点是由于绝对定位的元素是脱离文档流的,所以不会对其他元素的布局产生影响。缺点:由于transform是CSS3中新增的属性,所以IE6/7/8不支持,兼容性较差。