CSS如何實(shí)現(xiàn)子模塊水平居中

在進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)時(shí)，常常會(huì)遇到需要將子模塊水平居中的情況，下面我們來(lái)看一下如何用CSS實(shí)現(xiàn)該功能。

首先，我們需要有一個(gè)容器，里面包含了需要居中的子模塊，如下示例代碼：

<div class="container">
<div class="module">我要居中</div>
</div>

容器需要設(shè)置position屬性為relative，以便在設(shè)置子模塊的位置時(shí)相對(duì)于容器進(jìn)行定位。

.container {
position: relative;
}

接下來(lái)，我們需要給子模塊設(shè)置一些屬性，包括寬度、position、left等，如下：

.module {
width: 200px; /*設(shè)置子模塊的寬度*/
position: absolute; /*設(shè)置子模塊定位*/
left: 50%; /*將子模塊定位到容器的中心*/
transform: translateX(-50%); /*通過(guò)transform平移子模塊*/
}

以上代碼中，我們?cè)O(shè)置了子模塊的寬度為200px，并將子模塊設(shè)置為絕對(duì)定位，通過(guò)設(shè)置left為50%，將子模塊定位到容器的中心。接著，通過(guò)CSS3的transform屬性，將子模塊向左平移自身寬度的一半，使其水平居中。

最終的效果如下：