CSS 中的垂直和水平居中是網頁設計中常用的技巧。通過使用 CSS 的布局屬性和技巧，可以在網頁中輕松實現垂直和水平居中。下面我們將詳細介紹 CSS 中垂直和水平居中的方法。

/* 水平居中 */
.center {
display: flex;
justify-content: center;
}
/* 垂直居中 */
.center {
display: flex;
align-items: center;
}
/* 水平垂直居中 */
.container {
display: flex;
justify-content: center;
align-items: center;
}

以上是 CSS 中實現垂直和水平居中的基本示例。其中，可以使用 display: flex; 將容器設置為彈性布局，然后通過設置 justify-content、align-items 等屬性來實現布局。值得注意的是，垂直居中需要設置 align-items 屬性，而水平居中需要設置 justify-content 屬性。

如果希望在一個容器中實現垂直和水平居中，可以使用以上代碼的組合效果。所有的父級容器都應該是彈性布局，這樣子元素才會繼承這些屬性。

總之，在使用 CSS 實現垂直和水平居中時，需要使用彈性布局屬性和常見的 CSS 技巧來幫助我們實現。希望以上的例子能夠幫助您更好地理解和使用垂直和水平居中。