本文针对初学者常见错误：将 flex 布局应用于类名（class）却误用 ID 选择器（#），导致样式不生效；明确解释 .title-row 与 #title-row 的区别，并提供可运行的修复方案。
本文针对初学者常见错误：将 flex 布局应用于类名（class）却误用 id 选择器（#），导致样式不生效；明确解释 `.title-row` 与 `#title-row` 的区别，并提供可运行的修复方案。
你遇到的问题非常典型——Flexbox 在 上生效，但在 .title-row 容器上“失效”，根本原因在于 CSS 选择器书写错误：你在样式中使用了 #title-row（ID 选择器），但 HTML 中对应的元素实际是 <div class="title-row">（即拥有 class 名 <code>title-row，而非 id="title-row"）。
✅ 正确写法应为：
.title-row {
display: flex;
justify-content: center;
align-items: center; /* 推荐添加，实现垂直+水平居中 */
width: 100%;
height: 100vh;
position: relative; /* 为内部绝对定位元素提供参照 */
}⚠️ 同时注意：你原代码中 .title-img 和 p 元素均使用 position: absolute，这会使其脱离文档流，导致 flex 的布局能力（如 justify-content、align-items）对其完全失效。若目标是让图片和标题在容器内居中显示，应优先使用 Flexbox 原生能力，而非绝对定位：
<div class="title-row"> <img src="images/png.png" alt="Logo" class="title-img"> <p class="title-text">THE TITLE</p> </div>
.title-row {
display: flex;
flex-direction: column; /* 垂直排列子项 */
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
margin: 0;
}
.title-img {
max-height: 60vh;
width: auto;
margin-bottom: 20px;
}
.title-text {
font-size: 30px;
font-weight: bold;
margin: 0;
text-align: center;
}? 关键提醒：
立即学习“前端免费学习笔记（深入）”；
-
#id匹配的是id="xxx"的元素，.class匹配的是class="xxx"的元素 —— 二者不可混用； - 绝对定位（
position: absolute）会绕过 Flex 布局，除非你明确需要图层叠加或精细偏移，否则应避免在 flex 容器内对主要子元素滥用absolute； - 为确保 flex 容器高度生效，请确认其父级（如
和外层<div>）也设置了 <code>height: 100vh或height: 100%，并清除默认 margin（如body { margin: 0; }）。修复后，你就能安全地将 Flex 仅用于标题区域，同时为下方
.content区域自由采用 CSS Grid 或其他布局方式，真正实现模块化、解耦式开发。
