CSS 中居中是我們開發常見的需求，本文將為大家介紹一些常用的居中方式。

水平居中

讓一個div元素水平居中，常用的方法是使用margin，代碼如下：

div {
width: 200px;
height: 100px;
background-color: #ccc;
margin: 0 auto;
}

使用margin: 0 auto;可以讓元素水平居中，其中的0表示上下無邊距，auto表示左右自動居中。

垂直居中

讓一個div元素垂直居中，常用的方法是使用absolute，代碼如下：

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

將父元素的定位設置為relative，子元素的定位設置為absolute，然后使用top: 50%和transform: translateY(-50%)將子元素垂直居中。

水平垂直居中

讓一個div元素水平垂直居中，常用的方法是使用flexbox，代碼如下：

.container {
display: flex;
align-items: center;
justify-content: center;
}

將父元素的display屬性設置為flex，然后使用align-items: center和justify-content: center將子元素水平垂直居中。

總結

以上是 CSS 中常用的居中方式，分別是使用margin、absolute和flexbox。需要注意的是，flexbox是 CSS3 中新增的屬性，如果要兼容一些舊版本的瀏覽器，可以考慮使用其他方式。