CSS三层嵌套盒子问题：现有代码仅显示两层，如何修改实现三层？

嘿，作为CSS新手遇到这种布局问题太正常了，我来帮你快速解决！你的代码现在只显示两层盒子，主要有两个小问题：

问题分析 #

• 缺少最内层的HTML元素：你写了#third的CSS规则，但如果HTML里没有对应的<div id="third"></div>，浏览器根本不知道要渲染这个盒子。
• #third的margin-top值不完整且计算有误：用百分比margin垂直居中时，需要准确计算父元素剩余空间的一半，才能让盒子居中显示。

修改后的完整代码 #

我给你两种实现方案，你可以根据习惯选择：

方案1：用Flex布局（更简单，新手友好） #

这种方式不用手动计算百分比，父元素设置flex后子元素自动居中，不容易出错。

<div id="first">
  <div id="second">
    <div id="third"></div>
  </div>
</div>

#first {
  width: 100px;
  height: 100px;
  background: red;
  /* 开启flex布局，让子元素水平垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

#second {
  width: 50%;
  height: 50%;
  background: black;
  /* 同样给第二层开启flex，让第三层居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

#third {
  width: 25%;
  height: 25%;
  background: blue; /* 给第三层加个不同的颜色，方便区分 */
}

方案2：沿用你原来的margin百分比方式 #

如果你想坚持用margin来实现，需要补全#third的margin-top值，同时确保HTML结构完整：

<div id="first">
  <div id="second">
    <div id="third"></div>
  </div>
</div>

#first { 
  width: 100px; 
  height: 100px; 
  background: red; 
  overflow: hidden; 
}

#first #second { 
  position: relative; 
  width: 50%; 
  height: 50%; 
  margin: auto; 
  margin-top: 25%; 
  background: black; 
}

#first #second #third { 
  position: relative; 
  width: 25%; 
  height: 25%; 
  margin: auto; 
  margin-top: 37.5%; /* 计算方式：(100% - 25%)/2 = 37.5%，这样才能垂直居中 */
  background: blue; /* 添加颜色区分 */
}

效果说明 #

两种方案都能渲染出三层嵌套的盒子：红色最外层，黑色中间层，蓝色最内层，每层都居中显示。你可以直接复制代码运行看看效果～

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