CSS的子元素垂直居中是前端開發中常用的布局方法之一，尤其是在響應式設計中，其作用更為明顯。以下是關于如何使用CSS的子元素實現垂直居中的方法：

父元素 {
position: relative;
}
子元素 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

以上代碼中，我們通過給父元素設置相對定位，并設置子元素為絕對定位，再通過設置子元素的top值為50%，然后通過transform屬性將其向上移動50%，從而實現了子元素的垂直居中。

父元素 {
display: flex;
align-items: center;
}

以上代碼中，我們使用了flex布局，將其display屬性設置為flex，并通過align-items屬性設置子元素在縱軸方向上居中對齊。

父元素 {
line-height: 100px;
}
子元素 {
display: inline-block;
vertical-align: middle;
line-height: normal;
}

以上代碼中，我們通過設置父元素的line-height為子元素高度，然后將子元素的display屬性設置為inline-block，通過vertical-align屬性將其垂直居中對齊。

以上是CSS子元素垂直居中的幾種方法，根據具體的需求和情況可以選擇其中的一種或結合使用多種方法。總體而言，CSS子元素垂直居中確實十分實用，能夠方便地解決很多響應式布局問題。