如果只允许使用一个 div 元素来实现元素居中，你可以使用 CSS 的伪元素技巧。以下是如何用一个单独的 div 元素将文本居中：

这是一个很常见的demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Element</title>
<style>
  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #333;
    padding: 20px;
    background-color: #f0f0f0;
  }
</style>
</head>
<body>
  <div class="container">
    This element is centered.
  </div>
</body>
</html>

在这个示例中，我们使用了绝对定位和 transform 属性将 .container 元素相对于视口居中。将 top 和 left 属性设置为 50% 将元素定位到页面正中间，但周围留有空白。接着使用 transform: translate(-50%, -50%) 对元素进行偏移，将其完全居中。这样可以实现在单个 div 中让元素水平垂直居中。

在这个示例中，position: absolute; 使用的参照依赖于祖先元素中最近的定位元素。如果没有祖先元素设置了 position: relative;、position: absolute; 或 position: fixed;，则参照会默认回退至初始包含块，通常是整个视口。 ** 在示例代码中，我们没有为任何父元素或祖先元素设置定位属性。因此，top: 50%; 和 left: 50%; 的参照就是整个视口。您可以将这种情况视为已经隐式地使用了相对定位，因为您没有为祖先元素指定其他定位规则。

重点

换句话说，由于没有其他定位约束，浏览器在这种情况下会将视口作为参照。因此，即使没有明确使用相对定位，示例仍然可以正常工作。記住這是一個特例，僅限於在沒有其他被定位的祖先元素的情況下。在實際應用中，需要根據實際情況進行調整。**

你不知道的css（0）

重点