对齐绝对 div 中心

在网页开发中，有时需要在一个容器中居中放置一个绝对定位的 div 元素。如何实现让这个 div 元素水平垂直居中呢？下面我们介绍几种实现方式。

使用 flex

将包含绝对定位的 div 元素的容器设置为 flex 布局，通过设置 justify-content 和 align-items 属性可以让元素水平垂直居中。

<div class="container">
  <div class="absolute-div"></div>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.absolute-div {
  position: absolute;
}

使用 transform

通过设置绝对定位的 div 元素的 left 和 top 属性为 50%，再通过使用 transform 属性将元素向左上方移动自身宽高的一半，使其居中。

<div class="container">
  <div class="absolute-div"></div>
</div>

.container {
  position: relative;
}

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

使用 table-cell

将包含绝对定位的 div 元素的容器设置为 table 布局，将该 div 元素设置为 table-cell，通过设置 vertical-align 和 text-align 属性可以让元素水平垂直居中。

<div class="container">
  <div class="table-cell-div"></div>
</div>

.container {
  display: table;
  width: 100%;
  height: 100%;
}

.table-cell-div {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中 */
  position: absolute;
}

以上是几种常见的实现方式，通过选择合适的方式可以让绝对定位的 div 元素在容器中居中。