不使用Flexbox或Grid，如何用CSS实现元素居中？

下面是几种无需依赖Flexbox或Grid的经典实现方案，覆盖不同场景需求：

方法1：绝对定位 + margin: auto #

这种方法适用于子元素宽高已知或未知的情况，兼容性极佳（支持IE8及以上）。

原理：父元素设置相对定位，子元素绝对定位并将top/right/bottom/left设为0，此时margin: auto会自动分配剩余空间，实现居中。

.parent {
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
}
.child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 200px;
  height: 150px;
  background: #f0f0f0;
}

<div class="parent">
  <div class="child">绝对定位+margin:auto</div>
</div>

方法2：绝对定位 + 负margin #

此方法需要明确知道子元素的宽高，兼容性同样出色。

原理：子元素通过top: 50%和left: 50%定位到父元素中心偏右下的位置，再通过负margin将自身拉回真正的中心（margin值为宽高的一半）。

.parent {
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px; /* 子元素高度150px的一半 */
  margin-left: -100px; /* 子元素宽度200px的一半 */
  width: 200px;
  height: 150px;
  background: #f0f0f0;
}

方法3：绝对定位 + transform: translate #

无需知道子元素宽高，适合动态内容场景，兼容IE9及以上。

原理：top: 50%和left: 50%将子元素左上角定位到父元素中心，transform: translate(-50%, -50%)通过百分比偏移，让子元素自身中心与父元素中心重合。

.parent {
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f0f0f0;
  padding: 20px;
}

方法4：表格布局（Table/Table-cell） #

利用表格自带的垂直居中特性，兼容性好（支持IE8及以上）。

原理：父元素设为display: table，子元素设为display: table-cell并通过vertical-align: middle实现垂直居中，再配合text-align: center让内部行内/行内块元素水平居中；若子元素是块级元素，可再加margin: 0 auto。

.parent {
  display: table;
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
  text-align: center;
}
.child {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  display: inline-block;
  background: #f0f0f0;
  padding: 20px;
}

<div class="parent">
  <div class="child">
    <div class="inner">表格布局实现居中</div>
  </div>
</div>

方法5：Inline-block + Vertical-align #

适合父元素高度不固定的场景，兼容IE8及以上。

原理：通过给父元素添加一个高度为100%的伪元素（inline-block），让子元素可以通过vertical-align: middle与伪元素对齐，实现垂直居中；再用text-align: center实现水平居中。

.parent {
  width: 400px;
  min-height: 300px;
  border: 1px solid #ccc;
  text-align: center;
}
.parent::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.child {
  display: inline-block;
  vertical-align: middle;
  background: #f0f0f0;
  padding: 20px;
}

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