CSS 是前端開發中的重要技術之一，常常用于設計網頁布局、樣式等。其中，子控件的水平居中是一個常見的需求。下面就來介紹如何實現這個效果。

/* 設置子控件的寬度 */
.child {
width: 200px;
}
/* 設置子控件的左右內邊距(padding) */
.child span {
padding: 0 20px;
}

首先，我們需要給子控件設置一個固定的寬度。其次，我們在子控件中添加一個內部的<span>元素，并給它設置一個左右內邊距，以便增加其寬度。

/* 使用定位實現水平居中 */
.child {
position: relative;
left: 50%;
transform: translateX(-50%);
}

接下來，使用定位來實現水平居中。我們先將子控件設置為相對定位，然后將其左邊緣移動到父元素的中心位置，最后使用transform屬性將子控件水平居中。

<div class="parent">
<div class="child">
<span>我是子控件</span>
</div>
</div>

最后，將上述 CSS 代碼應用于對應的 HTML 元素即可。如下所示：

至此，“CSS 子控件水平居中” 方案便介紹完畢。希望對您有所幫助！