位置：绝对，宽度：未知。如何使div居中答案

【问题标题】：Position: absolute, width: unknown. How to center div位置：绝对，宽度：未知。如何使div居中
【发布时间】：2022-03-08 03:52:25
【问题描述】：

我需要用图像滑块上的点使 div 居中。

我已经在 SO 上搜索了一种方法，我发现了这个线程： Position center of div tag, which width is unknown advanced

我应用了那里给出的解决方案，但结果与我预期的不一样。 div 看起来比应有的更靠右。

谁能告诉我这可能是什么问题？

这发生在 FF 中，在 Chrome 中，div 一直向右。

【问题讨论】：

标签： html css

【解决方案1】：

试试这个CSS #sliderDots：

#sliderDots {
    position: relative;
    bottom: 40px;
    display: inline-block;
    background-color: whiteSmoke;
    border-radius: 15px;
    box-shadow: 0 0 10px 3px, 0 0 10px 0 #888 inset;
    padding: 10px 10px 10px 20px;
}

在 IE、FF 和 Chrome 中运行良好（位置更改为 relative，底部更改为 40px）

【讨论】：

【解决方案2】：

<center style="width:750px;height:20px">
    <div id="sliderDots">
        <ul>
            <li class="activeDot"></li>
            <li class=""></li>
            <li class=""></li>
            <li class=""></li>
            <li class=""></li>
            <li class=""></li>
            <li class="">
            </li></ul>
    </div>
</center>

为什么要居中 750 像素？

因为您的“内容”类的宽度为 800 像素，而右填充 + 左填充为 50 像素。

【讨论】：

您正在使用已弃用的 html 标签。不是一个好的答案，我什至无法理解。

【解决方案3】：

您也可以将 div 放在另一个容器 div 中，该容器 div 绝对定位并在同一空间中，但随后将 sliderDots div 设置为相对于 margin: auto 应用。

【讨论】：