通知栏水平居中需据父容器类型选择方案：父为普通块级容器时用 text-align: center；父为 flex 容器时用 justify-content: center；块级通知栏设宽后可用 margin: 0 auto；绝对定位则用 left: 50% + transform: translatex(-50%)。

直接用 text-align: center 就能解决，但前提是它得是内联元素或其父容器支持该行为；如果用了 display: flex 或设置了宽高/定位，反而容易居中失败。

通知栏是内联元素（比如 <span></span> 或未设 display 的 <div>） <p>这种情况下最简单：给它的父容器（通常是 <code><header></header> 或 <nav></nav>）加 text-align: center 即可。浏览器会把其中所有内联级内容水平居中。

• 别在通知元素自己身上写 margin: 0 auto —— 它没设宽度，auto 不生效
• 如果父容器用了 display: flex，text-align 会被忽略，得换用 justify-content: center
• 确保父容器宽度不是 fit-content 或被子元素撑开，否则“居中”范围太小，视觉上不明显

通知栏是块级元素且已设固定宽度（比如 width: 300px）

这时可以用经典方案：margin: 0 auto。它依赖块级元素的自动外边距计算机制，只对有明确宽度的块生效。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 必须同时满足两个条件：display: block（默认就是） + width 不为 auto
• 不要写成 margin: auto —— 这会让上下左右都 auto，在垂直方向无效，还可能干扰布局
• 如果父容器用了 position: relative 但没设高度，margin: 0 auto 仍能水平居中，不影响垂直位置

用了 Flex 布局的顶部区域（常见于现代导航栏）

很多项目里通知栏嵌在 <header></header> 里，而 header 已设 display: flex。这时候居中逻辑完全不同，得控制主轴对齐。

• 在父容器（header）上加 justify-content: center，让所有 flex 项目水平居中
• 如果通知栏只是多个子项之一（比如旁边还有 logo、菜单），想让它单独居中，就别让它当 flex 项目 —— 给它包一层 <div>，再对这层设 <code>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 靠谱得多。