通知栏水平居中需据父容器类型选择方案：父为普通块级容器时用 text-align: center；父为 flex 容器时用 justify-content: center；块级通知栏设宽后可用 margin: 0 auto；绝对定位则用 left: 50% + transform: translateX(-50%)。
直接用 text-align: center 就能解决，但前提是它得是内联元素或其父容器支持该行为；如果用了 display: flex 或设置了宽高/定位，反而容易居中失败。
通知栏是内联元素（比如 <span> 或未设 display 的 <div>）
这种情况下最简单：给它的父容器（通常是 <header> 或 <nav>）加 text-align: center 即可。浏览器会把其中所有内联级内容水平居中。
- 别在通知元素自己身上写
margin: 0 auto—— 它没设宽度，auto不生效 - 如果父容器用了
display: flex，text-align会被忽略，得换用justify-content: center - 确保父容器宽度不是
fit-content或被子元素撑开，否则“居中”范围太小，视觉上不明显
通知栏是块级元素且已设固定宽度（比如 width: 300px）
这时可以用经典方案：margin: 0 auto。它依赖块级元素的自动外边距计算机制，只对有明确宽度的块生效。
- 必须同时满足两个条件：
display: block（默认就是） +width不为auto - 不要写成
margin: auto—— 这会让上下左右都 auto，在垂直方向无效，还可能干扰布局 - 如果父容器用了
position: relative但没设高度，margin: 0 auto仍能水平居中，不影响垂直位置
用了 Flex 布局的顶部区域（常见于现代导航栏）
很多项目里通知栏嵌在 <header> 里，而 header 已设 display: flex。这时候居中逻辑完全不同，得控制主轴对齐。
立即学习“前端免费学习笔记（深入）”；
- 在父容器（header）上加
justify-content: center，让所有 flex 项目水平居中 - 如果通知栏只是多个子项之一（比如旁边还有 logo、菜单），想让它单独居中，就别让它当 flex 项目 —— 给它包一层
<div>，再对这层设margin: 0 auto - 避免同时写
text-align: center和justify-content: center，后者优先级更高，前者冗余
通知栏用了绝对定位（position: absolute）
这种写法常见于需要脱离文档流、覆盖在顶部的提示条。居中方式变成靠坐标控制，和常规流式布局无关。
- 设
left: 50%+transform: translateX(-50%)是最稳妥的水平居中组合 - 不要只用
left: 50%—— 元素左边缘会落在中间，整体偏右 - 如果父容器没设
position: relative，left: 50%会相对于视口计算，可能导致响应式错位
真正容易被忽略的是父容器的 display 类型和 width 行为——同一段 CSS 在 flex 容器和普通 block 容器里效果可能完全相反，先看父级再调子元素，比反复试 margin 靠谱得多。
