为什么`padding：auto div of parent div'与`margin：auto of child div`不一样？

Question

要将子div放在父div中心，我经常在css中使用margin: auto。

＆＃13;

＆＃13;

.parent {
width:500px;
background: red;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是，考虑到盒子模型，它是子位置的边距，而是父位置的填充。

所以，我试试。

＆＃13;

＆＃13;

.parent {
width:500px;
background: red;
padding:auto;
}

.child {
width:100px;
height:100px;
background: blue;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但这并没有像我想的那样奏效。你知道为什么吗？

Answer 1

将内联添加到text-align: center;为父级，将display: inline-block;添加到子级

＆＃13;

＆＃13;

.parent {
  width: 500px;
  height: 100px;
  background: red;
  text-align: center;
}

.child {
  width: 100px;
  height: 100px;
  background: blue;
  display: inline-block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个答案....这将解决你的问题...... 我使用了padding属性

.parent {
  
width:100px;
background: red;
padding-left:50%;
padding-right:50%;
}

.child {
  
width:100px;
height:100px;
background: blue;

}

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