display: grid + align-items: center没效果，因父容器未设display: grid或无明确高度，且align-items仅控制直接子元素在行轨道内的垂直对齐，非全容器居中。

display: grid + align-items: center 为什么没效果

因为 align-items: center 只在父容器是 display: grid（或 inline-grid）时才起作用，且它只控制**直接子元素**在**行轨道（row track）内**的垂直对齐——不是“相对于整个容器高度居中”，而是“相对于它被分配到的那一行的高度”。

常见错误现象：align-items: center 写了，文字还是贴顶；审查元素发现容器高度只有几像素，或子元素本身没撑开行高。

• 必须显式设置 display: grid，光写 align-items 浏览器直接忽略
• 如果没定义 grid-template-rows，浏览器会创建隐式行轨道，高度由内容决定（即 auto），此时 align-items 实际无空间可居中
• 多行文本若包裹在 <p></p> 或额外 <div> 里，<code>align-items 不会穿透进去控制内部文字对齐

  让多行文字真正在网格容器中垂直居中

  最稳的路径不是靠容器的 align-items，而是让文字所在单元格自己变成 Flex 容器。因为 align-items 管的是网格项位置，不是项内文字渲染逻辑。

  适用场景：表格单元格、卡片内容区、任何需要容纳换行文本+图标/按钮的网格子项。

  

  MediSearch

  一款AI工具，主要用于Medisearch是一个AI驱动的医疗健康搜索引擎，旨在根据可信提供医学问题的直接答案，适合需要提升相关任务效率的用户。

  下载
  • 给该网格子项（比如 .cell）加 display: flex + align-items: center
  • 必须设 height 或 min-height（如 height: 40px 或 height: 100%），否则 Flex 无法计算交叉轴可用空间
  • 水平居中可选加 justify-content: center；若需保留左对齐，就只加 align-items
  • 避免用 line-height: 100vh 或 vertical-align: middle —— 前者仅限单行，后者对块级无效

  place-items: center 是更简方案，但有前提

  place-items: center 是 justify-items: center 和 align-items: center 的简写，对所有直接子项生效。它看起来“一键居中”，但依赖两个硬条件：

  • 父容器必须有可测量的高度：比如 min-height: 100vh、height: 300px，或通过 grid-template-rows: 1fr + 父级高度约束来固定行高
  • 子元素要是直接子项——如果中间嵌套了一层 <div>，那层必须也设 <code>display: contents 或删掉，否则 place-items 只把它当一个整体居中，内部文字仍可能顶着上边
  • IE11 不支持 place-items，如需兼容，得降级用 Flexbox 或 @supports 检测

  align-self: center 只作用于单个网格项

  当你只想让某一个文字容器居中，其余保持默认（比如左对齐、顶部对齐），别动容器级的 align-items，直接给那个元素加：

  .special-text {
    align-self: center;
    justify-self: center;
  }

  注意：align-self 会覆盖 align-items 的设置，且它的对齐基准是该元素所占据的**合并后的网格轨道**（比如 grid-row: 2 / 4 就按第2～4行总高算），不是整个容器高度。

  容易被忽略的一点：如果这个文字容器本身是 display: inline 或未设 width，justify-self: center 可能不明显——建议配合 width: fit-content 或显式设宽再观察效果。