写出固定子容器在固定的父容器下水平垂直居中的布局

有多种方法可以实现固定子容器在固定父容器下水平垂直居中，以下列出几种常见且有效的方法，并附带代码示例：

1. Flexbox 布局:

这是现代 CSS 中最推荐和最简洁的方法。

<div class="parent">
  <div class="child">
    子容器内容
  </div>
</div>

.parent {
  width: 300px; /* 父容器宽度 */
  height: 200px; /* 父容器高度 */
  background-color: lightgray; /* 背景颜色，方便观察 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.child {
  width: 100px; /* 子容器宽度 */
  height: 50px; /* 子容器高度 */
  background-color: lightblue; /* 背景颜色，方便观察 */
}

2. Grid 布局:

Grid 布局也能轻松实现居中效果。

<div class="parent">
  <div class="child">
    子容器内容
  </div>
</div>

.parent {
  width: 300px;
  height: 200px;
  background-color: lightgray;
  display: grid;
  place-items: center; /* 简写形式，等同于 justify-items: center; align-items: center; */
}

.child {
  width: 100px;
  height: 50px;
  background-color: lightblue;
}

3. Absolute Positioning + Transform:

这种方法需要设置父容器为相对定位，子容器为绝对定位，然后使用 transform 属性进行偏移。

<div class="parent">
  <div class="child">
    子容器内容
  </div>
</div>

.parent {
  width: 300px;
  height: 200px;
  background-color: lightgray;
  position: relative; /* 父容器相对定位 */
}

.child {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  position: absolute; /* 子容器绝对定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使用transform进行偏移 */
}

4. Absolute Positioning + Margin auto:

这种方法也需要设置父容器为相对定位，子容器为绝对定位，然后利用 margin: auto 实现居中。

<div class="parent">
  <div class="child">
    子容器内容
  </div>
</div>

.parent {
  width: 300px;
  height: 200px;
  background-color: lightgray;
  position: relative;
}

.child {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

推荐使用 Flexbox 或 Grid 布局，因为它们更简洁、易于理解和维护。 选择哪种方法取决于你的具体需求和项目上下文。 如果你的项目需要兼容较老的浏览器，则 Absolute Positioning + Transform 的方法兼容性更好。

希望这些信息对您有所帮助!