place-items: center 只在 display: grid 布局下生效，等价于 justify-items: center; align-items: center，对 flex 容器无效；flex 中须分开写 justify-content 和 align-items。
place-items 可以合写水平+垂直居中，但它不是“缩写属性”，而是 grid 布局专属的复合声明，对 flex 无效。
place-items: center 在什么布局下生效
place-items: center 只在父容器设了 display: grid 时起作用，它等价于 justify-items: center; align-items: center。它不适用于 flex 容器——在那里写这行代码完全被忽略。
- 必须配合
display: grid使用，单独写place-items不会触发任何居中行为 - 它作用于所有直接子元素（grid items），不能只针对某一个
- 如果子元素本身是
display: flex或含浮动，place-items对其内部内容无影响 - IE 完全不支持，Edge 16+、Chrome 57+、Firefox 52+、Safari 10.1+ 支持
flex 布局里没有“合写”属性
flex 布局中不存在类似 place-items 的单属性合写方案。必须显式写两行：justify-content: center 和 align-items: center。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 误写成
place-content: center或place-items: center在 flex 容器里毫无效果 -
place-content是 grid 的另一个复合属性，控制“内容对齐”（即整个 grid track 区域的对齐），不是 item 居中 - 试图用
margin: auto在 flex 主轴/交叉轴上“偷懒”也不可靠：它只在主轴（flex-direction 方向）有效，交叉轴上基本失效
为什么别硬凑“一行写完”的习惯
CSS 对齐逻辑本质是分离的：水平对齐和垂直对齐由不同轴线、不同上下文决定。强行合并反而掩盖差异，导致在 flex 和 grid 间切换时出错。
-
text-align和vertical-align看似“一对”，但前者作用于块级容器内联内容，后者只对table-cell或行内元素有效，根本不在同一维度 -
margin: auto水平有效、垂直无效，是因为块流中垂直 margin 不参与布局计算 - 真正能“同时生效”的只有
flex的双属性组合或grid的place-items，但它们底层机制完全不同，不能混用
最容易被忽略的是：你写的居中语句是否落在正确的布局上下文里——place-items 写在 flex 容器上等于没写，justify-content 写在普通 div 上也毫无作用。先确认父容器的 display 值，再选对应方案，比追求“一行写完”重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
