CSS中有很多方法可以讓子元素居中，下面介紹幾種實現的方式。

/* 1. 使用flex布局 */
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
/* 2. 使用absolute和margin */
.parent {
position: relative;
}
.child {
position: absolute; /* 使子元素脫離文檔流 */
top: 50%; /* 相對于父元素頂部偏移50% */
left: 50%; /* 相對于父元素左側偏移50% */
transform: translate(-50%, -50%); /* 將子元素移動回父元素中心 */
}
/* 3. 使用grid布局 */
.parent {
display: grid;
}
.child {
justify-self: center; /* 水平居中 */
align-self: center; /* 垂直居中 */
}
/* 4. 使用table和table-cell */
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle; /* 垂直居中 */
text-align: center; /* 水平居中 */
}

以上是幾種常見的實現方式，可以根據實際情況選擇最適合的方法來實現子元素居中。