CSS 的居中排列是網頁布局中非常常見的一種排列方式，可以讓我們頁面的元素看起來更加整齊、美觀。接下來我們將介紹在 CSS 中如何實現水平居中和垂直居中排列。

<code>
/* 水平居中方法一：使用 margin */
.box {
width: 200px;
margin: 0 auto; /* 左右 margin 自動分配 */
}
/* 水平居中方法二：使用 flex */
.parent {
display: flex;
justify-content: center;
}
.child {
width: 200px;
}
/* 垂直居中方法一：使用 margin */
.parent {
height: 200px;
position: relative;
}
.child {
width: 100px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px; /* 將元素的高度一半作為 margin-top 的值 */
}
/* 垂直居中方法二：使用 flex */
.parent {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
}
.child {
width: 100px;
height: 50px;
}
</code>

這些方法都是非常簡單易懂的，可以幫助我們快速實現元素的居中排列。需要注意的是，在進行居中排列的時候，我們需要考慮到元素的寬高，以及父元素的寬高，才能得出最終的效果。