如何用CSS实现子元素在父元素中固定居中显示，且无需Flex布局？

要在不使用Flex布局的情况下实现子元素在父元素中固定居中显示，可以使用以下几种方法：

方法1：使用绝对定位和负边距

这种方法适用于已知子元素的尺寸。

.parent {
  position: relative;
  width: 100%;
  height: 100vh; /* 父元素的高度 */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px; /* 子元素的宽度 */
  height: 100px; /* 子元素的高度 */
  margin-top: -50px; /* 负边距为子元素高度的一半 */
  margin-left: -100px; /* 负边距为子元素宽度的一半 */
}

方法2：使用绝对定位和transform

这种方法不需要知道子元素的尺寸。

.parent {
  position: relative;
  width: 100%;
  height: 100vh; /* 父元素的高度 */
}

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

方法3：使用表格布局

这种方法适用于需要兼容旧版浏览器的情况。

.parent {
  display: table;
  width: 100%;
  height: 100vh; /* 父元素的高度 */
}

.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.child-inner {
  display: inline-block;
}

方法4：使用网格布局

虽然你提到不使用Flex布局，但如果你愿意使用CSS Grid布局，这也是一个不错的选择。

.parent {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh; /* 父元素的高度 */
}

.child {
  /* 子元素的样式 */
}

方法5：使用margin: auto和绝对定位

这种方法适用于已知父元素的尺寸。

.parent {
  position: relative;
  width: 100%;
  height: 100vh; /* 父元素的高度 */
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px; /* 子元素的宽度 */
  height: 100px; /* 子元素的高度 */
}

总结

• 方法1 和 方法2 是最常用的方法，尤其是 方法2，因为它不需要知道子元素的尺寸。
• 方法3 适用于需要兼容旧版浏览器的情况。
• 方法4 使用了CSS Grid布局，虽然你提到不使用Flex布局，但Grid布局也是一个强大的工具。
• 方法5 适用于已知父元素尺寸的情况。

根据你的具体需求选择合适的方法。