CSS是前端開發不可或缺的技能之一，在頁面設計中，居中是常用的布局操作。在本文中，我們將介紹CSS頁面三種常見的居中方式，分別是水平居中、垂直居中以及水平垂直居中。

水平居中

水平居中是將元素在水平方向上居中的布局方式。實現方法有多種，下面介紹其中兩種方式。

/*方式一：使用text-align*/
.parent{
text-align:center;
}
.child{
display:inline-block;
}
/*方式二：使用margin*/
.parent{
text-align:center;
}
.child{
margin:0 auto;
display:block;
}

垂直居中

垂直居中是將元素在垂直方向上居中的布局方式。實現方法也有多種，下面介紹其中兩種方式。

/*方式一：使用flex*/
.parent{
display:flex;
align-items:center;
}
.child{
display:inline-block;
}
/*方式二：使用position*/
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
transform: translateY(-50%);
}

水平垂直居中

水平垂直居中是將元素在水平和垂直方向上同時居中的布局方式。實現方法有多種，下面介紹其中兩種方式。

/*方式一：使用flex*/
.parent{
display:flex;
align-items:center;
justify-content:center;
}
.child{
display:inline-block;
}
/*方式二：使用position*/
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

以上就是CSS頁面三種常見的居中方式。在實際開發中，根據具體需要選擇合適的布局方式，可以使頁面視覺效果更加美觀舒適。