求助：如何将小div在大div中居中？设置margin-left无效

Hey there! I’ve run into this exact head-scratcher before, so let’s break down why your margin-left: 10% trick isn’t working and fix it up quickly.

常见原因 & 对应解决办法 #

• 盒子模型冲突：如果你的绿色Box设置了padding或border但没开启box-sizing: border-box，它的实际宽度会变成 80% + padding/border。加上margin-left:10%，总宽度就会超过父容器的100%，导致无法居中。
  解决：给绿色Box加上box-sizing: border-box，让padding和border包含在你设置的80%宽度里。

• 更简单且靠谱的居中方式：其实不用手动计算margin值，直接用margin: 0 auto就能让块级元素在父容器里水平居中，只要满足两个条件：

  1. 绿色Box是块级元素（默认display: block，如果改成inline之类的就不行）
  2. 父容器（蓝色Box）的宽度是明确的（这里是100%，完全符合）

示例代码 #

/* 蓝色父容器 */
.blue-box {
  width: 100%;
  background-color: #4285f4;
  padding: 1rem; /* 可选，给点内边距看得更清楚 */
}

/* 绿色子容器 */
.green-box {
  width: 80%;
  background-color: #34a853;
  margin: 0 auto; /* 核心：水平居中 */
  box-sizing: border-box; /* 避免padding/border破坏宽度 */
  padding: 1rem; /* 可选，测试盒子模型 */
}

为什么之前成功现在失效？ #

大概率是你之前无意中设置了全局box-sizing（比如* { box-sizing: border-box; }），现在这个设置丢失了；或者绿色Box的display属性被改成了非块级类型（比如inline-block，不过margin:0 auto对它也生效，只要父容器是块级）。

如果还是有问题，可以检查下蓝色Box有没有设置float、position: absolute这类会改变布局流的属性，这些也会影响子元素的居中效果。

内容的提问来源于stack exchange，提问作者spøjst