如何让h2标题置于卡片面板上方并居中显示？

我无法理解为何我的h2标签始终与卡片面板并排显示，希望将标题置于卡片上方。以下是我的布局代码、index.js代码，还附上了问题截图：

布局代码（CSS） #

* { box-sizing: border-box; padding: 0; margin: 0; }
body { font-family: "Muli", sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; padding: 10%; background-color: #ffbe76; }
h1 { font-weight: 400; font-size: 48px; line-height: 60px; }
p { font-weight: 400; font-size: 24px; line-height: 30px; }

index.js代码 #

import React from "react"
import Layout from "../components/Layout/Layout"
import Card from "../components/Card/Card"
const Homepage = () => {
  return (
    <Layout>
      <h2> HEADER</h2>
      <Card />
    </Layout>
  )
}
export default Homepage

问题截图 #

标题与卡片并排的问题截图

看起来问题出在元素的布局上下文上——虽然你给body设置了flex-direction: column（理论上子元素应该垂直排列），但实际出现并排，大概率是以下两种情况之一：

情况1：Card组件是行内/行内flex元素 #

如果你的Card组件内部样式设置了display: inline-flex或inline-block，它会和h2（默认块级，但可能被上下文影响）并排显示。

解决办法：修改Card的样式为块级元素：

/* 在Card组件的CSS文件中添加 */
.card-container { /* 替换成你Card组件的根元素类名 */
  display: block;
  width: 100%; /* 可选，确保占满父容器宽度 */
}

情况2：Layout组件内部有额外的flex row容器 #

可能你的Layout组件内部包裹内容的容器设置了display: flex且flex-direction: row，导致h2和Card被强制横向排列。

解决办法：在Homepage中给标题和卡片套一个垂直排列的flex容器：

import React from "react"
import Layout from "../components/Layout/Layout"
import Card from "../components/Card/Card"
const Homepage = () => {
  return (
    <Layout>
      {/* 添加一个垂直排列的容器，强制标题和卡片上下布局 */}
      <div style={{ 
        display: "flex", 
        flexDirection: "column", 
        alignItems: "center",
        width: "100%"
      }}>
        <h2> HEADER</h2>
        <Card />
      </div>
    </Layout>
  )
}
export default Homepage

备用方案：强制h2占据整行 #

如果上面的方法都不生效，可以直接给h2添加样式，让它强制占满一行，迫使卡片换行：

h2 {
  display: block;
  width: 100%;
  text-align: center; /* 和body的align-items:center保持视觉一致 */
  margin-bottom: 1rem; /* 可选，给标题和卡片加一点间距 */
}

这些修改应该能让你的标题稳稳地出现在卡片上方啦！

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