CSS水平居中方案

1. 行內(nèi)元素水平居中

設置父元素的text-align:center

.box {width: 300px;height: 300px;margin: 100px auto;text-align: center;background-color: pink;
}

2. 塊級元素水平居中

當塊級元素設置了明確的寬度數(shù)值時，可以使用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%);
}