为什么需要 transform: translate(-50%,-50%)？_h5 position: absolute; right: 50px; top: 100px; tr-CSDN博客

本文链接：https://blog.csdn.net/2403_83881202/article/details/142796127

当我们想要使用CSS来进行元素的定位布局的时候，往往不由自主的想到position，但是当我们使用position进行元素居中对齐的时候，却发现结果差强人意，这是因为什么呢？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        border: 1px solid #b9b3b3;
        position: absolute;
        top: 50%;
        left: 50%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div>
        <span> 热点排行 </span>
        <span> 评论排行 </span>
        <span> 图片排行 </span>
      </div>
    </div>
  </body>
</html>

这是因为当你对一个元素设置 position: absolute; left: 50%; top: 50%; 时，元素的左上角会被移动到其包含块的水平和垂直中心。然而，这并不意味着元素的中心被定位到了中心，而是元素的左上角被定位到了那里。因此，元素看起来会偏离中心，具体偏离的距离取决于元素自身的宽度和高度。

所以我们需要将 position: absolute; left: 50%; top: 50%; 与 transform: translate(-50%, -50%); 结合使用，首先通过 position 和 left、top 属性将元素的左上角移动到父容器的中心，然后通过 transform 属性将元素本身沿相反方向移动其宽度和高度的50%，最终使元素的中心对准父容器的中心。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        border: 1px solid #b9b3b3;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div>
        <span> 热点排行 </span>
        <span> 评论排行 </span>
        <span> 图片排行 </span>
      </div>
    </div>
  </body>
</html>

如图所示，就位于正中间