CSS中让DIV居中的代码

要让一个DIV居中，可以通过以下三种方式实现：

要让一个DIV居中，可以通过以下三种方式实现：

1. 使用margin属性

将DIV的宽度固定，然后通过设置margin属性，使其左右居中。

.div-center {
  width: 300px;
  margin: 0 auto;
}

上面代码中，设置了DIV的宽度为300px，然后将左右margin设置为auto，这样DIV就会在水平方向上居中。

2. 使用flex布局

使用flex布局可以轻松实现水平和垂直居中。首先需要设置父容器的display为flex，然后设置justify-content和align-items属性为center。

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

上面代码中，justify-content属性表示水平方向上的对齐方式，align-items属性表示垂直方向上的对齐方式，都设置为center，这样子元素会在父元素的中心位置居中。

3. 使用position属性和transform属性

使用position属性和transform属性可以实现DIV的水平垂直居中，这种方式通常需要将DIV的宽高设置为固定值。

.div-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 200px;
  margin-top: -100px;
  margin-left: -150px;
  transform: translate(-50%, -50%);
}

上面代码中，使用position: absolute将DIV绝对定位，然后使用top: 50%和left: 50%将其移动到父元素的中心位置。使用width和height属性设置DIV的宽高，然后使用transform属性中的translate(-50%, -50%)将其调整到父元素的中心位置。注意设置margin-top和margin-left属性来微调DIV的定位。

示例1：

HTML代码：

<div class="container">
  <div class="div-center">我要居中</div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #eee;
}

.div-center {
  width: 200px;
  height: 100px;
  background-color: #f00;
}

上面代码中，使用flex布局，将子元素居中在父容器中。

示例2：

HTML代码：

<div class="div-center">我要水平垂直居中</div>

CSS代码：

.div-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 200px;
  margin-top: -100px;
  margin-left: -150px;
  background-color: #f00;
  transform: translate(-50%, -50%);
}

上面代码中，使用position和transform属性将DIV居中。注意，这种方式需要将DIV的宽高设置为固定值。