CSS中是否可设置乘法外边距？如何在高度动态的容器内居中盒子？

以下所有方案均不依赖父容器的固定高度值，父容器高度随内容动态变化时，子元素会始终保持居中状态。

方案1：Flex布局（现代项目首选，兼容性较好） #

写法简洁，无需修改子元素样式，适配绝大多数业务场景：

/* 仅需给父容器添加以下样式 */
.parent {
  display: flex;
  justify-content: center; /* 实现水平居中 */
  align-items: center; /* 实现垂直居中 */
}

• 优势：代码量少，适配性强，兼容所有现代浏览器及IE10+。

方案2：Grid布局（复杂布局场景首选） #

如果项目不需要兼容低版本IE，Grid布局的实现更精简：

/* 仅需给父容器添加以下样式 */
.parent {
  display: grid;
  place-content: center; /* 一行属性同时实现水平+垂直居中 */
}

• 优势：适合多子元素的复杂布局场景，代码更简洁，兼容Chrome 57+、Firefox 52+、Safari 10.1+。

方案3：绝对定位+transform（低版本浏览器兼容方案） #

如果需要兼容IE9等更低版本浏览器，可以选择该方案：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 以子元素自身宽高为基准偏移，无需提前知道子元素尺寸 */
  transform: translate(-50%, -50%);
}

• 注意：absolute定位会让子元素脱离文档流，若子元素尺寸大于父容器，可能会出现溢出问题，需要额外配合overflow属性处理。

方案4：table-cell布局（极旧浏览器兜底方案） #

如果需要兼容IE8及更早版本，可以使用table模拟布局实现：

/* 父容器的外层元素需要添加display: table */
.grand-parent {
  display: table;
}
.parent {
  display: table-cell;
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}

• 劣势：table布局的渲染性能低于现代布局方案，仅作为兜底场景使用。

内容的提问来源于stack exchange，提问作者Maral sgh