CSS 如何居中一个 “position: absolute” 元素

在本文中，我们将介绍如何使用 CSS 将一个使用了 “position: absolute” 属性的元素居中。

阅读更多：CSS 教程

居中元素的方法

方法一：使用 “top” 和 “left” 属性

当一个元素的 position 属性设置为 absolute 时，我们可以通过设置其 top 和 left 属性的值来实现居中。假设我们要居中一个宽度为 200px，高度为 100px 的 div 元素，可以按照以下代码进行设置：

.center-element {
  position: absolute;
  width: 200px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

上述代码中，top 和 left 的值均为 50%，这将把元素的左上角定位在父元素的中心位置。然而，为了完全居中元素，我们还需要使用 transform 属性以及 translate 函数来调整元素的位置。transform: translate(-50%, -50%); 可以将元素的中心点定位在父元素的中心。这样，只要父元素的宽高不变，元素就能够始终处于居中状态。

方法二：使用 “margin” 属性

除了使用 top 和 left 属性来居中一个绝对定位的元素，我们也可以使用 margin 属性来实现相同的效果。以下是另一种居中元素的方法：

.center-element {
  position: absolute;
  width: 200px;
  height: 100px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

上面的代码中，将 top、bottom、left 和 right 属性的值都设置为 0，这将把元素的四个边都挨到父元素的四个边。然后，将 margin 属性的值设置为 auto，这将自动计算出使元素居中所需的左右边距。

示例

示例一：使用 “top” 和 “left” 属性

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      width: 400px;
      height: 300px;
      border: 1px solid #000;
    }

    .center-element {
      position: absolute;
      width: 200px;
      height: 100px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="center-element"></div>
  </div>
</body>
</html>

在上面的示例中，我们创建了一个宽度为 400px，高度为 300px 的容器，并在容器中放置了一个宽度为 200px，高度为 100px 的子元素。通过将子元素的 top 和 left 设置为 50%，使用 transform 属性进行调整，即可将子元素居中显示。

示例二：使用 “margin” 属性

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      width: 400px;
      height: 300px;
      border: 1px solid #000;
    }

    .center-element {
      position: absolute;
      width: 200px;
      height: 100px;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="center-element"></div>
  </div>
</body>
</html>