在網頁設計中，讓元素居中是非常常見的需求。如果你是一名CSS初學者，可能會感到有些困惑。下面我們就來學習一下如何使用CSS讓元素居中。

1. 水平居中

/* 使用text-align屬性 */
.center {
text-align: center;
}
/* 使用flexbox */
.container {
display: flex;
justify-content: center;
}
/* 使用margin */
.box {
margin: 0 auto;
}

2. 垂直居中

/* 使用line-height屬性，適用于單行文本 */
.text {
height: 100px;
line-height: 100px;
text-align: center;
}
/* 使用flexbox */
.container {
display: flex;
align-items: center;
}
/* 使用position和transform屬性 */
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

3. 水平垂直居中

/* 使用flexbox */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* 使用position和transform屬性 */
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

總結：在CSS中，使用text-align、margin和flexbox布局都可以實現元素的水平居中；使用line-height、flexbox布局和position、transform屬性都可以實現元素的垂直居中；使用這些方法的組合，可以實現元素的水平垂直居中。