为何父div的padding:auto无法实现子div居中，与子div的margin:auto效果不同？

嘿，这个问题其实戳中了很多人对CSS盒模型属性规则的误区，我来给你掰扯清楚：

首先，先说说你第一种可行写法的原理：
你用margin:auto让子元素居中是完全符合CSS规范的——当子元素是块级元素且设置了明确的宽高时，浏览器会自动计算父容器中剩余的水平空间，把左右margin平均分配，从而让子元素在父容器里水平居中。这是常规文档流中块级元素的标准行为。

对应的代码（你写的这个是对的）：

.parent { width:500px; background: red; }
.child { width:100px; height:100px; background: blue; margin:auto; }

<div class="parent"> <div class="child"></div> </div>

那为什么你尝试的padding:auto写法没用呢？核心原因很简单：
CSS规范里根本不允许padding属性使用auto值。padding的合法取值只能是具体长度（比如px、rem）、百分比，或者inherit/initial这类关键字，auto是无效值，浏览器会直接忽略这个声明。相当于你的父元素根本没设置padding，自然不会有任何居中效果。

如果硬要通过父元素的padding来实现视觉上的居中，你得手动计算padding值：比如父容器宽500px，子元素宽100px，剩余水平空间是400px，给父元素设置左右各200px的padding就行：

.parent { width:500px; background: red; padding: 0 200px; }
.child { width:100px; height:100px; background: blue; }

但这种写法非常不灵活，一旦父容器或子元素的尺寸变动，就得重新计算，远不如margin:auto或者flex布局（比如给父元素加display:flex; justify-content:center;）来得方便。

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