CSS水平居中方案
1. 行内元素水平居中
设置父元素的text-align:center
.box {width: 300px;height: 300px;margin: 100px auto;text-align: center;background-color: pink;
}
2. 块级元素水平居中
当块级元素设置了明确的宽度数值时,可以使用margin: 0 auto
3. 绝对定位
<div class="container"><div class="box"></div>
</div>
.container {position: relative;width: 300px;height: 300px;background-color: orange;
}
.box {position: absolute;left: 0;right: 0;width: 100px;height: 100px;background-color: pink;
}
4. flex布局
<div class="container"><div class="box"></div>
</div>
.container {display: flex;justify-content: center;width: 300px;height: 300px;background-color: orange;
}
.box {width: 100px;height: 100px;background-color: pink;
}
5. 利用形变trnasform:trnaslate()
.container {width: 300px;height: 300px;background-color: orange;
}
.box {position: relative;left: 50%;width: 100px;height: 100px;background-color: pink;transform: translateX(-50%);
}