如何使用 CSS 将 div 中绝对定位的元素居中？

在开发 web 应用程序时，经常需要将某个元素绝对定位到其父元素中心位置，本文将介绍如何使用 CSS 实现这样的居中效果。

使用 flexbox 实现居中

CSS3 引入了 flexbox 布局，可以轻松实现居中效果。下面是如何将绝对定位的元素居中的示例代码：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 300px;
}

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

在上面的代码中，.parent 是一个相对定位的容器，它设置为 flex 布局，并通过 justify-content 和 align-items 属性将子元素在容器中垂直和水平居中。.child 元素是绝对定位的，通过 top、left 和 transform 属性定位在容器中心。其中 transform 属性将元素向上和向左移动 50%，实现了居中的效果。

使用 grid 实现居中

CSS3 引入了一种基于网格的布局系统，称为 grid。它将页面划分为网格，并允许轻松布置和对齐元素。下面是如何使用 grid 实现居中效果的示例代码：

.parent {
  display: grid;
  place-items: center;
  position: relative;
  height: 300px;
}

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

在上面的代码中，.parent 容器设置为 grid 布局，并使用 place-items 属性将子元素在容器中垂直和水平居中。.child 元素同样是通过 top、left 和 transform 属性定位在容器中心。

使用 calc 函数实现居中

如果您不想使用 flexbox 或 grid，还可以使用 CSS 的 calc 函数实现元素居中。下面是一个示例代码：

.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 50px);
  width: 100px;
  height: 50px;
}

在上面的代码中，.child 元素通过设置 top 和 left 属性以及元素的宽度和高度将其定位在容器中心。calc 函数计算出上下和左右的偏移量，并将其应用于相应的元素属性上。

总结：本文介绍了三种使用 CSS 将绝对定位的元素居中的方法。使用 flexbox 和 grid 布局可以轻松实现这样的效果，而 calc 函数则可以用于解决其他情况下的居中问题。