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%);
}