本文详解如何通过 CSS 实现分数文本在记分牌容器内水平垂直居中，重点解决 flex 父容器下子元素（如 ）未受 justify-content 和 align-items 影响的问题，并提供简洁可靠的解决方案。
本文详解如何通过 css 实现分数文本在记分牌容器内水平垂直居中，重点解决 `flex` 父容器下子元素（如 `
`）未受 `justify-content` 和 `align-items` 影响的问题，并提供简洁可靠的解决方案。
在篮球记分牌这类强调视觉对齐的 UI 场景中，分数数字（如 10、20）必须严格居中于 .scoreboard 容器内——既不能偏左偏右，也不能上下错位。虽然 .container 已设为 display: flex 并使用 justify-content: space-evenly 布局左右两块记分牌，但其内部的 .scoreboard 是普通块级容器（非 flex），因此直接在 <p></p> 上设置 margin: 0 auto 仅能触发水平居中（依赖块级元素的自动外边距机制），却无法实现垂直居中；而 padding 手动调整又缺乏响应性与可维护性。
✅ 正确解法是：将 .scoreboard 设为 flex 容器，并利用 justify-content + align-items 双向控制。这是最语义清晰、浏览器兼容性好（支持所有现代浏览器及 IE11+）、且无需额外 DOM 结构的方案。
.scoreboard {
margin-top: -40px;
width: 150px;
height: 125px;
border: 1px solid #ffffff;
border-radius: 2px;
/* 关键：启用 Flex 布局并双向居中 */
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
p {
color: #ffa500;
font-family: 'cursed-timer', sans-serif;
font-size: 72px;
margin: 0; /* 移除默认外边距，避免干扰 flex 对齐 */
/* padding 可移除或保留仅作内边距微调（非居中手段） */
}
⚠️ 注意事项：
- 不要依赖
text-align: center单独实现垂直居中——它仅作用于行内内容的水平对齐，对块级高度无影响； - 避免滥用
position: absolute+transform: translate(-50%, -50%)，虽可行但增加定位复杂度，且易受父容器position上下文干扰； - 若需兼容极老浏览器（如 IE9 及以下），可回退至
line-height等高法（仅适用于单行文本），但本例中font-size: 72px与height: 125px不匹配，故不推荐； - 字体加载方面，请确保
@font-face路径正确，并添加font-display: swap提升渲染体验。
最终效果：无论分数是 0 还是 127，数字均精确锚定在 .scoreboard 的几何中心，兼顾美观性与工程健壮性。
