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 中新增的属性，如果要兼容一些旧版本的浏览器，可以考虑使用其他方式。