CSS怎么樣讓子元素居中呢？這里有三種方法來實現。
首先，我們有可能需要垂直和水平居中子元素。如果要水平居中，我們可以設置父元素為相對定位，設置子元素為絕對定位，并將子元素的左右位置設置為0。這個方法適用于子元素寬度已知的情況下。

html
<p>
<pre>
<div class="parent">
<div class="child"></div>
</div>
.parent{
position: relative;
}
.child{
position: absolute;
left: 0;
right: 0;
margin: auto;
}

如果子元素寬度未知，則可以使用另一種方法。這個方法不需要設置左右間距，我們可以設置父元素為相對定位，設置子元素為絕對定位，并使用transform屬性。這個方法可適用于子元素寬度未知的情況。

html
<p>
<pre>
<div class="parent">
<div class="child"></div>
</div>
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

最后，如果要垂直居中，我們可以使用display: flex和align-items: center來將子元素垂直居中。這個方法要求將容器設置為flex布局。

html
<p>
<pre>
<div class="parent">
<div class="child"></div>
</div>
.parent{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.child{
/* 沒有額外的設置 */
}

以上三種方法都可以讓我們輕松地實現子元素的居中。很多時候這些方法都可以互相結合使用，讓我們根據需求靈活應用。