不使用display: flex; div如何嵌套居中

有多种方法可以将一个div嵌套居中，以下是其中一些方法：

1. 使用text-align: center;将div中的文本居中对齐，如果div中没有文本，可以使用::before或::after伪元素添加一些文本，例如：

<div class="container">
  <div class="center"></div>
</div>

.container {
  text-align: center;
}
.center::before {
  content: "居中";
}

2. 使用position: absolute;和transform: translate();将div相对于父元素居中，例如：

<div class="container">
  <div class="center"></div>
</div>

.container {
  position: relative;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. 使用margin: auto;将div水平和垂直居中，这需要将div的宽度和高度设置为固定值，例如：

<div class="container">
  <div class="center"></div>
</div>

.container {
  height: 200px;
  width: 200px;
}
.center {
  height: 100px;
  width: 100px;
  margin: auto;
}