CSS中的居中是前端開發中最為基礎的要素之一，那么在CSS中如何實現居中呢？下面就介紹十種實現CSS居中的方法。

1. 使用text-align屬性實現水平居中
{
text-align: center;
}
2. 使用margin屬性實現水平居中
{
margin: 0 auto;
}
3. 使用position和transform屬性實現水平及垂直居中
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
4. 使用Flexbox（彈性盒布局）實現水平及垂直居中
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
5. 使用Grid（網格布局）實現水平及垂直居中
.wrapper {
display: grid;
place-items: center;
}
6. 使用table-cell屬性實現水平及垂直居中
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
7. 使用line-height屬性實現文本垂直居中（單行文本）
{
line-height: height;
}
8. 使用垂直margin實現文本垂直居中（單行文本）
{
margin-top: calc((height - font-size) / 2);
margin-bottom: calc((height - font-size) / 2);
}
9. 使用垂直padding實現文本垂直居中（單行文本）
{
padding-top: calc((height - font-size) / 2);
padding-bottom: calc((height - font-size) / 2);
}
10. 使用transform屬性實現圖片居中
{
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}

以上就是CSS居中的十種方法，使用這些方法可以幫助開發者實現更好的頁面效果。