CSS `margin: auto` 如何使元素居中？

CSS 边距中“自动”的魔力

众所周知，CSS 边距决定了元素周围的空间。但是如果我们使用 'auto' 作为值呢？

理解 'Auto' 的作用

当应用于 margin 的第二个参数时，'auto' 赋能浏览器有责任自行确定左右边距。它通过相等地设置两个边距来实现这一点。

示例：使对象居中

让我们考虑一个场景，其中我们有一个宽度为 100px 的父容器和一个子元素宽度为 50px。通过使用“margin: 0 auto”，浏览器会计算剩余空间 (50px) 并将其平均分配在左右边距之间。

这将导致以下计算：

freeSpace = 100 - 50 = 50
equalShare = freeSpace / 2 = 25

margin-left: 25
margin-right: 25

因此，子元素在父元素中居中

附加说明

• 不需要指定父元素的宽度，'auto' 就能工作。只需要子对象的宽度即可。
• margin 第一个参数也可以使用“Auto”，表示上下边距设置相等。

以上是CSS `margin: auto` 如何使元素居中？的详细内容。更多信息请关注PHP中文网其他相关文章！