居中是web開發中經常遇到的問題，尤其是在布局設計環節。在CSS中，有多種居中方案，本文將詳細介紹這些方案。

水平居中

讓一個元素在水平方向上居中，通常可以通過以下幾種方式實現：

/* 方案一：使用text-align */
.parent {
text-align: center;
}
/* 方案二：使用flexbox */
.parent {
display: flex;
justify-content: center;
}
/* 方案三：使用grid */
.parent {
display: grid;
place-items: center;
}

垂直居中

讓一個元素在垂直方向上居中，也有多種實現方式：

/* 方案一：使用line-height */
.parent {
height: 100px;
line-height: 100px;
text-align: center;
}
/* 方案二：使用flexbox */
.parent {
display: flex;
justify-content: center;
align-items: center;
}
/* 方案三：使用grid */
.parent {
display: grid;
place-items: center;
}

水平垂直居中

讓一個元素在水平和垂直方向上同時居中，常采用以下方案：

/* 方案一：使用absolute + margin */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 方案二：使用flexbox */
.parent {
display: flex;
justify-content: center;
align-items: center;
}
/* 方案三：使用grid */
.parent {
display: grid;
place-items: center;
}

需要注意的是，不同的居中方案適用于不同的情況和布局，開發者應該根據具體需求選擇最適合的方案。