问题根源在于 CSS 选择器错误——用 #title-row（ID 选择器）匹配了实际为 class 的元素，导致 flex 布局未生效；修正为 .title-row 后，容器即可正确启用 Flexbox 并居中内容。
问题根源在于 css 选择器错误——用 `#title-row`（id 选择器）匹配了实际为 class 的元素，导致 flex 布局未生效；修正为 `.title-row` 后，容器即可正确启用 flexbox 并居中内容。
你在 HTML 中写的是：
<div class="title-row"> @@##@@ <p>THE TITLE</p> <div></div> </div>
这意味着 title-row 是一个 class 名，而非 ID。但你的 CSS 却使用了 ID 选择器：
#title-row { /* ❌ 错误：# 表示 ID，但 HTML 中没有 id="title-row" */
display: flex;
justify-content: center;
width: 100vh;
height: 100vh;
}
浏览器找不到匹配的元素，因此该样式完全不生效——<div class="title-row"> 保持默认文档流布局，内部子元素（如 <code><img src="images/png.png"> 和 <p></p>）因设置了 position: absolute 而脱离文档流，自然回退到左上角（top: 0; left: 0），造成“回到顶部左侧”的现象。
✅ 正确写法应为 class 选择器：
.title-row {
display: flex;
justify-content: center;
align-items: center; /* ✅ 推荐添加：垂直+水平居中 */
width: 100vw; /* ⚠️ 注意：此处应为 vw（视口宽度），非 vh */
height: 100vh;
position: relative; /* ✅ 必须添加：为绝对定位子元素提供定位上下文 */
overflow: hidden; /* 可选：防止内容溢出 */
}
同时，请注意以下关键修复点：
.title-row需设position: relative：因为其子元素（.title-img和p）使用了position: absolute，它们的定位基准是最近的 已定位祖先元素（即position值不为static的父级）。若.title-row未显式设置relative，绝对定位会向上回溯至或更外层，破坏预期布局。慎用
absolute+flex混合：Flexbox 的核心优势在于流式、响应式、无需手动计算偏移的布局控制。当前你用left: 135px; top: 130px硬编码<p></p>位置，既丧失灵活性，又与justify-content: center冲突。推荐改为纯 Flex 方案：
.title-row {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
.title-row img {
max-width: 80%;
height: auto;
margin-bottom: 2rem;
}
.title-row p {
font-size: 30px;
font-weight: bold;
margin: 0;
z-index: 2;
}
这样 <img> 和 <p></p> 将自动居中堆叠，无需任何 absolute 定位，也无需手动写死像素值，真正发挥 Flexbox 的语义化与自适应能力。
? 总结提醒：
-
#id匹配id="id"，.class匹配class="class"—— 初学者最常见错误，务必核对 HTML 结构； - 绝对定位子元素必须包裹在
position: relative的父容器中，否则定位基准不可控； - 在 Flex 容器内，优先使用 Flex 属性（
justify-content,align-items,gap等）替代absolute+ 像素偏移，代码更健壮、可维护性更高。
现在你可以放心将 display: flex 仅应用于 .title-row，而保留 或后续 .content 区域自由使用 CSS Grid 或其他布局方式——结构解耦，职责清晰，正是现代 CSS 布局的最佳实践。
