如何使绝对定位UL内的圆点居中？尝试多种方案未果

我明白你折腾半天想把绝对定位的.new-dots列表里的圆点居中却碰壁的心情，结合你给出的SCSS代码，咱们来揪出问题所在，再给你落地的修复方案：

先分析现有代码的潜在问题 #

1. 父容器未设置相对定位：你的.new-dots用了position:absolute，但如果它的父元素.photos没设置position:relative，这个绝对定位的元素会相对于页面根元素（body/html）定位，而非你预期的.photos容器，这会导致width:100%的范围不对，居中自然失效。
2. UL默认样式干扰：浏览器默认会给ul标签加上padding-left，这会让你的列表整体偏右，即使设置了text-align:center也会有偏移。
3. inline元素的空格问题：li用display:inline时，HTML里的换行/空格会被解析成空白字符，可能导致圆点排列的实际宽度超出预期，影响居中效果。

修复方案（结合以上问题调整） #

直接给你修改后的SCSS代码，每一步都做了标注：

.photos {
  // 关键！给父容器加相对定位，让子元素的绝对定位基于它
  position: relative;

  .new-dots {
    width: 100%;
    position: absolute;
    top: 0;
    // 重置ul默认的padding和margin，消除默认偏移
    padding: 0;
    margin: 0;
    // 保留text-align:center，配合li的调整实现居中
    text-align: center;

    li {
      // 换成inline-block，避免inline元素的空格问题，也能更好控制尺寸
      display: inline-block;
      color: rgba(202, 202, 202, 0.78);
      margin-right: 5px;

      button {
        background: rgba(202, 202, 202, 0.75);
        border-width: 0;
        width: 16px;
        height: 16px;
        border-radius: 8px;
        color: transparent;
      }

      button:focus {
        outline: none;
      }
    }

    .slick-active {
      button {
        background: #FFF !important;
      }
    }
  }

  .photo {
    height: 100vw;
  }
}

备选进阶方案（用transform精准居中） #

如果上面的方法还是有问题，可以试试更稳妥的绝对定位居中技巧，把.new-dots的样式改成这样：

.new-dots {
  position: absolute;
  top: 0;
  // 向左偏移50%，再用transform拉回自身宽度的50%，实现精准居中
  left: 50%;
  transform: translateX(-50%);
  // 不需要设置width:100%，让元素自适应内容宽度即可
  padding: 0;
  margin: 0;

  // 剩下的li和button样式不变...
}

这个方法的好处是不需要依赖text-align，也不受父容器宽度的限制，不管你的圆点列表有多宽，都能精准居中在父容器的水平中点。

测试小提示 #

修改完代码后，记得刷新页面，同时可以打开浏览器的开发者工具（F12），检查.new-dots的定位父元素是不是.photos，以及ul的padding/margin是否被正确重置，这些细节很容易被忽略哦！

内容的提问来源于stack exchange，提问作者Jake Cross