wordpress 做公司網(wǎng)站網(wǎng)絡營銷的推廣
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%);
}