CSS中，讓元素水平居中是比較簡(jiǎn)單的，主要有以下幾種方法：

/* 方法1：設(shè)置寬度和margin */
div {
width: 400px;
margin: 0 auto;
}
/* 方法2：使用 flex */
.container {
display: flex;
justify-content: center;
}
.container div {
/* 設(shè)置寬度 */
}

但是讓元素垂直居中，就比較麻煩了，特別是元素高度未知或者不定高的情況下。以下是一些實(shí)現(xiàn)垂直居中的方法：

/* 方法1：使用絕對(duì)定位和偏移量 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 方法2：使用 flex */
.parent {
display: flex;
align-items: center;
justify-content: center;
}
/* 方法3：使用 table-cell */
.parent {
display: table-cell;
vertical-align: middle;
}
/* 方法4：使用 :before 或 :after 偽元素 */
.parent {
position: relative;
}
.parent:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.child {
display: inline-block;
vertical-align: middle;
}

需要注意的是，以上方法都是針對(duì)固定高度的元素來(lái)進(jìn)行的，如果需要實(shí)現(xiàn)可變高度的元素垂直居中，可以使用 flex 或者 table-cell 的方式來(lái)實(shí)現(xiàn)。