如何在父DIV中创建嵌套小DIV？CSS3选择器布局疑问

我正在通过课程视频学习HTML5和CSS3，示例图中展示CSS3选择器效果的制作者并未给出全局div{}的样式代码，我想了解能实现该效果的相关CSS属性。

我拿到的选择器代码如下，关于div{}，我原本打算用position和margin属性调整内部DIV的大小。想请教是否仅通过引用div选择器，就能调整内部DIV的尺寸并使其居中？

现有代码 #

CSS代码

div {
  position: relative;
  top: 50%;
  width: 90%;
  height: 90%;
  margin: auto auto auto auto;
}

div.outer-outer {
  background-color: red;
}

div.outer-outer div.inner {
  background-color: blue;
}

div.outer,
div.inner-inner {
  background-color: yellow;
}

div#main-section {
  background-color: green;
}

div.footer-section {
  background-color: purple;
}

HTML代码

<div class="outer-outer">
  Outer Outer
  <div class="outer">
    Outer
    <div class="inner">
      Inner
      <div class="inner-inner">
        Inner Inner
      </div>
    </div>
  </div>
</div><br /><br />

<div id="main-section">
  Main Section
</div><br />

<div class="footer-section">
  Footer Section
</div>

问题分析与解决方案 #

你当前的div样式无法实现预期效果，核心问题：

• position: relative+top: 50%是让元素相对于自身原始位置偏移，不是相对于父元素居中；
• height: 90%需要父元素有明确高度值才会生效，否则子元素高度会被内容撑开；
• margin: auto在常规流/相对定位下只能实现水平居中，无法垂直居中。

如果要仅通过全局div选择器实现嵌套div的尺寸缩小+居中效果，可以用以下两种方案：

方案1：基于盒模型的简单实现

div {
  box-sizing: border-box; /* 确保padding不会额外撑大元素尺寸 */
  width: 90%;
  margin: 0 auto; /* 水平居中 */
  padding: 1.2em; /* 预留内容与边框的间距 */
}

/* 给最外层div设置固定高度，保证子元素百分比高度生效 */
div.outer-outer {
  background-color: red;
  width: 100%;
  height: 320px;
}

/* 保留原有选择器样式 */
div.outer-outer div.inner {
  background-color: blue;
}

div.outer,
div.inner-inner {
  background-color: yellow;
}

div#main-section {
  background-color: green;
}

div.footer-section {
  background-color: purple;
}

方案2：Flex布局（更灵活，推荐）

div {
  width: 90%;
  height: 90%;
  margin: auto; /* 在flex容器中，margin:auto可实现水平+垂直双居中 */
}

/* 给所有嵌套父级div设置flex布局 */
div.outer-outer, div.outer, div.inner {
  display: flex;
  align-items: center; /* 垂直居中对齐内容 */
  justify-content: center; /* 水平居中对齐内容 */
  width: 100%;
  min-height: 110px; /* 保证嵌套层级有可见区域 */
}

/* 调整最外层容器高度 */
div.outer-outer {
  background-color: red;
  min-height: 320px;
}

/* 保留原有选择器样式 */
div.outer-outer div.inner {
  background-color: blue;
}

div.outer,
div.inner-inner {
  background-color: yellow;
}

div#main-section {
  background-color: green;
}

div.footer-section {
  background-color: purple;
}

关键属性说明 #

• box-sizing: border-box：让元素的宽高包含padding和border，避免尺寸溢出；
• display: flex：将元素转为flex容器，子元素可通过margin:auto或容器的对齐属性实现精准居中；
• 明确父元素高度：使用百分比高度时，必须给父元素设置固定/百分比高度（最终追溯到html/body这类有明确高度的容器）。

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