CSS Flexbox作用于<body>生效，仅作用于指定div容器时失效

• 选择器不匹配：CSS里用了#title-row（ID选择器），但HTML中标题容器的属性是class="title-row"（类选择器），导致你写的Flex样式根本没作用到目标元素上。
• 绝对定位脱离文档流：标题里的图片和<p>标签都加了position: absolute，这类元素会脱离正常文档流，Flex容器的justify-content: center对它们完全无效——不管Flex容器怎么设置，绝对定位元素都会按照left/top的定位值排列，所以会跑到左上角。
• body的Flex布局是“假生效”：当你给body加Flex样式时，是body的直接子元素（那个外层<div>）被居中了，而.title-row设置了width:100vh，刚好占满视口宽度，看起来像是标题居中，但这不是.title-row自己的Flex布局起的作用。

1. 修正选择器匹配 #

把CSS里的#title-row改成.title-row，让样式正确作用到目标容器上。

2. 移除绝对定位，让元素参与Flex布局 #

删掉图片和<p>标签的position: absolute、left、top属性，让它们回到Flex容器的文档流中，这样Flex的对齐规则才能生效。如果需要文字叠在图片上方，可以给文字设置position: relative和z-index，同时调整Flex容器的对齐方式让两者重叠。

3. 调整.title-row的Flex布局 #

设置align-items: center让元素垂直居中，同时按需调整宽高（如果不需要占满整个视口，就去掉width:100vh和height:100vh）。

4. 主内容区应用Grid布局 #

给.content添加Grid样式，比如设置列数、间距等，实现你需要的网格布局。

CSS #

/* 标题区域Flex布局 */
.title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 按需设置宽高，比如要占满视口就保留，否则去掉 */
    width: 100%;
    height: 300px;
    position: relative; /* 让内部相对定位的元素以这个容器为基准 */
}

.title-row img {
    z-index: 1;
    width: 200px; /* 按需设置图片大小 */
    height: auto;
}

.title-row > p {
    z-index: 2;
    position: relative; /* 用相对定位代替绝对定位，保留层级 */
    font-size: 30px;
    font-weight: bold;
    margin-left: -180px; /* 调整这个值让文字叠在图片上，根据图片大小调整 */
}

/* 主内容区Grid布局 */
.content {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
    gap: 20px; /* 网格间距 */
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.book {
    border: 1px solid #ccc;
    padding: 15px;
    text-align: center;
}

body {
    margin: 0; /* 去掉默认边距 */
}

HTML #

<body>
  <div>
    <div class="title-row">
      <img src="images/png.png" alt="标题图片">
      <p>THE TITLE</p>
    </div>
    <div class="content">
      <div class="book"><p>Book1 <br>By author1</p></div>
      <div class="book"><p>Book2<br>By author2</p></div>
      <div class="book"><p>Book3<br>By author3</p></div>
      <div class="book"></div>
      <div class="book"></div>
      <div class="book"></div>
    </div>
  </div>
</body>

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