CSS 居中子元素是一種使用 CSS 進行元素布局的技巧。通過將子元素設置為一個 `display: flex` 或 `display: inline-flex` 的樣式，并將其 `align-items: center` 屬性設置為 `true`，可以使子元素居中。

使用 `display: flex` 將整個元素轉換為 Flexbox 布局，然后使用 `align-items: center` 屬性將子元素居中。這個技巧利用了 Flexbox 的自動布局功能，可以自動調整整個元素的布局，而無需手動調整每個子元素的對齊方式。

例如，下面的代碼將一個帶有 `margin` 的文本元素居中：

```css

.parent {

display: flex;

align-items: center; /* 將整個元素轉換為 Flexbox 布局并設置 align-items: center */

.child {

margin: 10px;

在這個例子中，`.parent` 元素是父元素，`.child` 元素是子元素，`display: flex` 將其轉換為 Flexbox 布局，`align-items: center` 將其居中。

除了使用 `align-items: center` 屬性外，還可以使用 `justify-content: center` 和 `flex-direction: column` 屬性進行居中。其中，`justify-content: center` 將子元素水平居中，而 `flex-direction: column` 將子元素垂直居中。

總之，CSS 居中子元素是一種簡單而有效的方法，可以使復雜的元素布局變得更加容易和直觀。