【CSS】CSS水平居中方案

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