在網頁設計中，水平和豎直居中是非常重要的布局技巧。而使用CSS可以輕松實現這樣的效果。 首先，讓我們來看一下如何實現水平居中。我們可以使用以下代碼來實現：

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

這段代碼使用了`flex`布局來讓元素水平居中。 `justify-content`屬性被設置為`center`，這意味著子元素將被平均地分配并置于容器的中心位置。 而豎直居中則是通過以下代碼來實現：

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

這里我們使用了`align-items`屬性來將子元素豎直居中。這個屬性將子元素垂直分布并置于容器的中心位置。 同時，我們也可以將水平和豎直居中一起實現。使用以下代碼來讓元素水平和豎直居中：

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

這意味著子元素將垂直和水平分布，并置于容器的中心位置。 除了以上提到的`flex`布局方法外，我們也可以使用`position`+`transform`來實現水平和豎直居中。使用以下代碼來讓元素水平和豎直居中：

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

這里，`position`屬性被設置為`relative`，而子元素則使用了絕對位置來實現豎直和水平居中。`top`和`left`屬性分別被設置為50%，這意味著子元素將從容器的中心點開始。而`transform`屬性則將子元素在水平和豎直方向上移動50%，從而實現居中效果。 總而言之，水平和豎直居中是非常有用的布局技巧，可以用于設計響應式網站和應用程序的布局。而使用CSS，我們可以方便地實現這些效果。