CSS如何實現子模塊水平居中

在進行網頁布局設計時，常常會遇到需要將子模塊水平居中的情況，下面我們來看一下如何用CSS實現該功能。

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

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

容器需要設置position屬性為relative，以便在設置子模塊的位置時相對于容器進行定位。

.container {
position: relative;
}

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

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

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

最終的效果如下：