在網頁設計中，CSS是不可或缺的一個部分，可以用來美化頁面元素和布局。子元素的居中也是網頁設計中經常遇到的一個問題。

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

這段代碼看上去似乎可以讓子元素居中，但是實際上，如果子元素的內容超出了父元素的寬度或高度，就會出現問題，子元素只會水平或垂直居中。

那么如何解決此問題呢？

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

這段代碼可以讓子元素在父元素中水平和垂直居中，并且不受內容寬度或高度的限制。使用flex布局已經成為實現居中的一個通用方法。

同時，還有一個比較老的方法，可以使用table和table-cell來實現子元素的居中：

.parent{
display: table;
width: 100%;
height: 100%;
}
.child{
display: table-cell;
text-align: center;
vertical-align: middle;
}

以上兩種方法都可以實現子元素的居中，但是flex布局相對于table和table-cell更加靈活，推薦使用flex布局。