水平居中 div 时遇到问题答案

【问题标题】：Having trouble centering a div horizontally水平居中 div 时遇到问题
【发布时间】：2022-11-18 15:04:16
【问题描述】：

为什么当我执行 position: relative 和 left: 50% 时它没有完美地将 div 水平居中？我在想，因为它是 50%，所以应该已经过半了，但它总是有点偏离。

【问题讨论】：

这回答了你的问题了吗？ How can I horizontally center an element?
你们能不能停止对我的问题投反对票
你能附上一张显示div“有点偏离”的图片吗？

标签： html css

【解决方案1】：

请将代码包含在问题中，以便我们提供更好的答案？

它不能完美居中，因为将左侧空间的 width 设置为父级 width 的一半，而不是 div。

如果您知道 div 的宽度，这里是一个示例，说明如何通过分配其 width 数量的一半的负数 margin 来正确居中：

<body>
    <div style="border: 1px solid red;">
        <div style="position: relative; left: 50%; background: red; width: 20%; height: 100px; display: block; margin-left: -10%;">
            
        </div>
    </div>
</body>

但更简单的方法是为 div 样式设置 display: block; 和 margin: auto;

<body>
        <div style="border: 1px solid red;">
            <div style="background: red; width: 100px; height: 100px; display: block; margin: auto;">
                
            </div>
        </div>
    </body>

【讨论】：