垂直滚动通告栏文字不居中，应优先用 display: flex + align-items: center；单行可用 line-height = height；多行需统一 padding 与高度；旧浏览器降级为 line-height + text-align；动画避免作用于 flex 容器本身。

垂直滚动通告栏里文字不居中？先看 display 和 line-height 组合

垂直滚动通告栏（比如用 <marquee></marquee> 或 CSS @keyframes 实现）里文字上下偏移，往往不是“没写 text-align”，而是行内元素在块级容器中缺乏垂直对齐控制。最直接有效的办法是让容器有明确高度，并用 line-height 匹配该高度 —— 但仅适用于单行文本。

• 如果容器 height: 40px，就设 line-height: 40px，文字自然垂直居中
• 若内容可能换行或行数不确定，line-height 失效，得改用 display: flex + align-items: center
• 注意：老式 <marquee></marquee> 标签不支持 flex，必须外层套一个 div 容器再 flex

用 CSS 动画做垂直滚动时，flex 居中要避开 transform 干扰

很多人用 @keyframes 配合 transform: translateY() 做滚动，但若直接在 flex 容器上加动画，align-items: center 可能失效 —— 因为 transform 会触发新层叠上下文，且影响 flex 子项的布局计算。

• 正确结构：外层容器设 display: flex; align-items: center; height: 60px; overflow: hidden
• 内层滚动内容用独立子元素（如 <div class="scroller">），对其做 <code>animation 和 transform
• 避免把 animation 写在 flex 容器本身上
• 示例关键代码：

  .notice-board { display: flex; align-items: center; height: 60px; overflow: hidden; }
  .scroller { animation: scrollUp 8s linear infinite; }
  @keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
  }

多行通告滚动时文字居中，padding 和 height 要同步算

当通告内容不止一行（比如每条含标题+副标），靠 line-height 不再适用，flex 是首选；但要注意滚动区域高度、单条内容高度、padding 三者必须匹配，否则视觉上仍会偏移。


htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载
• 假设每条通告高 32px，上下 padding 各 8px，则单条实际占用 48px
• 滚动容器高度应为 48px × 行数（例如显示 2 条就是 96px）
• flex 容器设 align-items: center 后，每条内容需设 height: 48px 或用 padding 统一撑开，否则 flex 无法准确居中
• 若用 margin 代替 padding，会导致 flex 计算偏差，优先用 padding

IE 或旧版 Safari 下 flex 不生效？fallback 方案只留 line-height

部分老系统（如 IE11、iOS 9 Safari）对 flex 的 align-items 支持不稳定，尤其嵌套动画时。此时不要强行 polyfill，而应提供降级：单行场景下，退回到 line-height = height + text-align: center。

立即学习“前端免费学习笔记（深入）”；

• 写法示例：

  .notice { height: 40px; line-height: 40px; text-align: center; }
  /* 现代浏览器覆盖 */
  @supports (display: flex) {
    .notice { display: flex; align-items: center; justify-content: center; }
  }

• 避免在同一个元素上同时写 line-height 和 flex，CSS 会按顺序覆盖，但不同引擎解析逻辑不一致
• 真要兼容 IE，别用 transform 滚动，改用 top + position: relative，否则动画卡顿严重

实际滚动效果是否居中，取决于容器尺寸、内容盒模型、以及动画作用对象这三者的咬合精度。差 1px 都可能看起来“偏了”，所以建议用 Chrome DevTools 的“Layout”面板实时拖拽 height 和 padding 观察变化。