CSS中，水平和垂直居中對于頁面的美觀和布局非常重要。以下是一些技巧和方法，可以幫助您實現水平和垂直居中。

水平居中

代碼：
.element {
position: relative;
left: 50%;
transform: translateX(-50%);
}
說明：
將元素定位為相對位置，使用left屬性將元素向左移動50%，并使用transform的translateX屬性將它向右移動50%，以使元素完全居中。

另一種水平居中的方法是使用flexbox布局：

代碼：
.container {
display: flex;
justify-content: center;
}
.container .element {
/* width property is required */
}
說明：
使用display:flex來實現彈性布局，并使用justify-content:center將元素水平居中。

垂直居中

代碼：
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
說明：
將元素定位為相對位置，使用top屬性將元素向上移動50%，并使用transform的translateY屬性將它向下移動50%，以使元素完全垂直居中。

還有另一種垂直居中的方法是使用flexbox布局：

代碼：
.container {
display: flex;
align-items: center;
}
.container .element {
/* height property is required */
}
說明：
使用display:flex來實現彈性布局，并使用align-items:center將元素垂直居中。

值得注意的是，當您的容器中只有一個元素時，垂直居中使用align-items:center可能無效。如果我們強制將容器的高度設置為固定的高度，那么可以使用相對定位實現垂直居中。

代碼：
.container {
position: relative;
height: 200px;
}
.container .element {
position:absolute;
top:50%;
transform: translateY(-50%);
}
說明：
將容器的高度設置為固定高度，并將容器定位為相對位置。使用相對定位和transform屬性來將元素垂直居中。

總之，以上是實現水平和垂直居中的幾種CSS技術，您可以選擇最適合您的布局目標的方法。