最直接方式是将父容器设为display: flex，并设置flex-direction: column、justify-content: center、align-items: center，且父容器需有明确高度（如height: 100vh），同时重置margin: 0避免偏移。
用 display: flex + justify-content 和 align-items 同时控制两个标签
两个标签（比如 <h2></h2> 和 <p></p>）要上下排列、整体在容器中水平垂直居中，最直接的方式是把它们的父容器设为 Flex 容器，并让子项沿主轴（默认水平）和交叉轴（默认垂直）都居中。
- 父容器必须有明确高度（如
height: 100vh或固定值），否则align-items: center没效果 - 两个子标签默认是块级，会自然换行堆叠；不需要额外设置
flex-direction: column，但加了更清晰 - 避免给子标签设
margin或padding，否则可能干扰垂直居中计算 - 如果父容器是
，记得重置margin: 0，否则顶部留白会让居中偏下
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
用 text-align: center 只能水平居中，不能解决“上下两个标签”的垂直对齐
很多人一上来就给父容器加 text-align: center，结果发现两个标签确实水平居中了，但整体还是贴着顶部——因为 text-align 只管**行内内容的水平对齐**，对块级子元素的位置毫无影响，更不控制它们离顶部多远。
- 该属性对
<h2></h2>、<p></p>这类块级标签完全无效（它们不是“文本内容”，而是独立盒子） - 即使把两个标签改成
display: inline-block，text-align: center也只能让它们并排或换行后各自水平居中，无法保证两者整体在父容器垂直方向居中 - 常见错误：父容器写了
text-align: center，又给子标签加margin: 0 auto——后者对块级元素生效，但只做水平居中，且要求子标签有明确宽度
用绝对定位 + transform 居中时，两个标签得包在一个 wrapper 里
如果两个标签必须脱离文档流（比如做弹窗标题+说明），就不能单独定位每个标签，而要把它们一起塞进一个 <div> 再整体定位。否则每个标签都要重复写 <code>top: 50%、left: 50%、transform: translate(-50%, -50%)，极易错位。
- wrapper 必须设
position: absolute，且父容器要有position: relative（否则定位基准是视口） - wrapper 不需要设宽高，内部两个标签保持默认块级行为即可自然堆叠
- 不要给 wrapper 设
margin或padding，它只负责定位，样式由子标签自己控制 - 注意可访问性：脱离文档流后，屏幕阅读器顺序可能错乱，必要时加
aria-labelledby
.parent { position: relative; height: 100vh; }
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
为什么 margin: 0 auto 对两个标签不起作用
margin: 0 auto 是让**单个块级元素自身**在父容器中水平居中，它不处理多个兄弟元素之间的相对位置，也不控制它们离父容器顶部的距离。
- 如果你给第一个
<h2></h2>加了margin: 0 auto，它只会水平居中，第二个<p></p>仍按默认文档流紧贴其下方，整体依然靠上 - 想用这个方案，必须把两个标签包进一个新
<div>，再给这个 wrapper 设宽度和 <code>margin: 0 auto——但这只解决水平居中，垂直方向还得另配padding-top或flex等手段 - 常见陷阱：wrapper 设了
width: 100%，那margin: 0 auto就完全无效（没剩余空间可分）
真正卡住人的地方，往往不是不会写某一行 CSS，而是没意识到「上下两个标签居中」本质是「一个视觉组在容器中的二维定位」，必须选能同时控制 X 和 Y 的方案。Flexbox 是目前最省心的选择，但前提是父容器高度可控；若高度不可控（比如内容动态拉伸），就得靠 Grid 的 place-items 或 JS 补位——这点容易被忽略。
