最直接方式是将父容器设为display: flex，并设置flex-direction: column、justify-content: center、align-items: center，且父容器需有明确高度（如height: 100vh），同时重置margin: 0避免偏移。
用 display: flex + justify-content 和 align-items 同时控制两个标签
两个标签（比如 和 ）要上下排列、整体在容器中水平垂直居中，最直接的方式是把它们的父容器设为 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 只管**行内内容的水平对齐**，对块级子元素的位置毫无影响，更不控制它们离顶部多远。
- 该属性对
、这类块级标签完全无效（它们不是“文本内容”，而是独立盒子） - 即使把两个标签改成
display: inline-block，text-align: center也只能让它们并排或换行后各自水平居中，无法保证两者整体在父容器垂直方向居中 - 常见错误：父容器写了
text-align: center，又给子标签加margin: 0 auto——后者对块级元素生效，但只做水平居中，且要求子标签有明确宽度
用绝对定位 + transform 居中时，两个标签得包在一个 wrapper 里
如果两个标签必须脱离文档流（比如做弹窗标题+说明），就不能单独定位每个标签，而要把它们一起塞进一个 真正卡住人的地方，往往不是不会写某一行 CSS，而是没意识到「上下两个标签居中」本质是「一个视觉组在容器中的二维定位」，必须选能同时控制 X 和 Y 的方案。Flexbox 是目前最省心的选择，但前提是父容器高度可控；若高度不可控（比如内容动态拉伸），就得靠 Grid 的 top: 50%、left: 50%、transform: translate(-50%, -50%)，极易错位。
position: absolute，且父容器要有 position: relative（否则定位基准是视口）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 是让**单个块级元素自身**在父容器中水平居中，它不处理多个兄弟元素之间的相对位置，也不控制它们离父容器顶部的距离。
加了 margin: 0 auto，它只会水平居中，第二个 仍按默认文档流紧贴其下方，整体依然靠上margin: 0 auto ——但这只解决水平居中，垂直方向还得另配 padding-top 或 flex 等手段
width: 100%，那 margin: 0 auto 就完全无效（没剩余空间可分）place-items 或 JS 补位——这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
