[分享]CSS中定义一个盒子让其居中

在CSS中，我们可以使用以下代码使得一个盒子居中，首先需要在CSS文件中定义该盒子：

.box {
  width: 200px; /* 宽度 */
  height: 200px; /* 高度 */
  background-color: #CCC; /* 背景颜色 */
} 

接下来就是让该盒子居中的代码：

.box {
  margin: auto; /* 居中代码 */
} 

简单解释一下，margin是指盒子与周围元素的距离，我们使用margin: auto;可以将盒子水平居中，在父元素中上下居中可以加上以下代码：

.parent {
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.box {
  width: 200px; /* 宽度 */
  height: 200px; /* 高度 */
  background-color: #CCC; /* 背景颜色 */
} 

其中，父元素需要使用弹性布局（display: flex;），并且justify-content: center;可以让盒子在父元素中水平居中，align-items: center;可以让盒子在父元素中垂直居中。通过这些代码，我们就可以让一个盒子居中了。