CSS是前端開發中必不可少的技能之一。在網頁設計中，我們需要讓元素居中顯示，特別是子元素的居中。下面讓我們來學習一下如何使用CSS來使子元素居中顯示。

#parent {
display: flex;
justify-content: center;
align-items: center;
}

上面這段代碼就是使用flex布局來讓子元素居中顯示的方法。首先給父元素添加display: flex;屬性，將其設置為一個flex容器。接著設置justify-content:center;和align-items:center;屬性，讓子元素在父容器中水平和垂直居中顯示。

#parent {
position: relative;
}
#child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

如果我們不想使用flex布局，我們也可以使用position屬性和transform屬性來實現子元素的居中顯示。首先給父元素設置position:relative;，并設置子元素的position屬性為absolute。接著給子元素設置top:50%和left:50%，將其移動到父容器的中心位置。最后使用transform屬性設置子元素向左和向上移動50%的寬度和高度，讓其完美居中。

總結起來，我們學習了使用CSS的flex布局和position屬性和transform屬性來實現子元素的居中顯示。根據實際需求可以選擇不同的方法來實現。讓我們在網頁設計中有效地運用CSS技巧，讓人們看到更加美觀、優雅的頁面。