HTML结构如下
<div class="parent">
<div class="child">demo</div>
</div>
这里的父元素和子元素的宽度都未知
1. inline-block + text-align
.child {
display: inline-block;
}
.parent {
text-align: center;
}
优点:兼容性很好,可以兼容到IE6(*zoom)
缺点:text-align会继承,所以子元素要重设text-align:left
2. table + margin
.child {
display: table;
margin: 0 auto;
}
设置display: table
会让div呈块状元素,但是宽度和内容相同。接着设置margin: 0 auto;
就可以居中了
优点: 兼容性好,低版本IE可以使用table布局,且只在子元素上设置属性即可
3. absolute + transform
.parent {
position: relative;
}
.child {
posotion: absolute;
left: 50%;
transform: translateX(-50%);
}
这里是利用了transform: translateX(50%)
设置为百分比是相对于自身的百分比的特性
优点:子元素脱离文档流
缺点:不支持IE678,其他浏览器可能需要加入私有前缀
4. flex + justify-content
.parent {
display: flex;
justify-content: center;
}
优点:只设置父元素即可
缺点:兼容性问题。flex是css3的规范