`margin: 0 auto;` 如何将元素在其容器内居中？

Auto：将元素在其容器内居中

使用 auto 作为第二个参数定义 margin 属性时，可以毫不费力地设置元素的样式位于其父容器的中心。发生这种情况的原因是：

• 自动计算：浏览器自动确定左右边距，平均分配它们之间的可用空间。
• 相等Margins：左右边距保证大小相同，保证对称定位。

Margin 属性细分：

margin: 0 auto;

• 0 将顶部和底部边距设置为 0。
• auto自动计算左右边距以居中

示例：

考虑一个宽度为 100px 的父容器和一个宽度为 50px 的子元素。 auto 属性将计算子元素边距之间的可用空间：

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

结果：

margin-left: 25px
margin-right: 25px

子元素现在将在父容器中居中。可以通过这个 [jsFiddle]（链接到 jsFiddle）观察这种定位的实际情况。注意，auto属性只需要指定子对象的宽度即可生效。

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