div 内的DIV上下左右居中

当需要在一个`<div>`元素内部让另一个`<div>`元素水平垂直都居中对齐时，可以采用CSS的方式设置样式。下面是一种常见的方法：

1. **绝对定位** (推荐用于有固定大小的元素)：
将包含`<div>`设为相对定位(`position: relative;`)，然后将内层`<div>`设为绝对定位(`position: absolute;`)，并设置其`top`, `right`, `bottom`, `left`为0，同时设置`margin`为auto，这样内层`<div>`会在其父容器内居中。

.parent-div {
  position: relative;
  width: /* 父容器宽度 */;
}

.child-div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  /* 设置宽高，如果不需要自适应高度 */
  width: /* 子div宽度 */;
  height: /* 子div高度 */;
}

2. **Flexbox布局** (适用于现代浏览器，支持响应式设计)：
如果父容器使用`display: flex;`和`justify-content: center;`，`align-items: center;`属性，就可以轻松实现两轴的居中。

.parent-div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: /* 父容器宽度 */;
}

.child-div {
  /* 或者保持默认样式 */
}

3. **Grid布局** (类似Flexbox，适用于网格系统)：
如果父容器使用`display: grid;`，设置`place-items: center;`即可。

.parent-div {
  display: grid;
  place-items: center;
  width: /* 父容器宽度 */;
}

.child-div {
  /* 或者保持默认样式 */
}