用 display: grid 真正居中需设 place-items: center（等价于 justify-items 和 align-items 同时居中），父容器须有明确高度（如 min-height: 100vh），推荐弹性列布局 grid-template-columns: 1fr minmax(0, 600px) 1fr，并用 place-self 控制子项内部对齐。
用 display: grid 实现真正居中的容器
不是靠 margin: auto 或 text-align: center 假装居中，而是让网格本身把内容“钉”在正中心。关键在于定义一个单单元格网格，并用 place-items: center —— 它等价于同时设置 justify-items: center 和 align-items: center。
常见错误是只写 justify-content: center，结果发现垂直方向没反应：因为那是控制**网格轨道之间**的间距，不是控制单元格内容的对齐。
-
place-items: center作用于网格容器，影响所有直接子项（即网格项）的对齐方式 - 必须确保父容器有明确高度（比如
min-height: 100vh），否则垂直居中无参照 - 如果子元素本身是块级且宽高不定，它会按自身尺寸居中；若想撑满单元格，加
width: 100%; height: 100%到子元素上
避免 grid-template-columns 和 grid-template-rows 写死导致不对称
很多人一上来就写 grid-template-columns: 1fr 1fr 1fr，以为三等分就是对称——但“对称”不等于“等分”，而是视觉重心落在中线。真正可控的中心结构，推荐用 grid-template-columns: 1fr minmax(0, 600px) 1fr 这种“弹性边距 + 内容区”模式。
这样做的好处是：当视口变窄时，两侧 1fr 自动收缩，中间内容区保持最大可用宽度但不溢出；视口变宽时，两侧伸展，始终维持左右视觉平衡。
- 别用固定像素值（如
200px）做边栏，会破坏响应性 -
minmax(0, 600px)比单纯写600px更安全：防止内容区在小屏下撑破容器 - 如果需要严格等宽三列+居中效果，用
grid-template-columns: 1fr 2fr 1fr，中间列占一半，整体自然对称
处理子元素内部不对齐：别忘了 place-self
即使整个网格居中了，子元素内部文字、图片或按钮仍可能左偏。这时候不能靠外层网格“再推一次”，而应让子项自己控制内部对齐。
比如一个卡片组件里有标题和按钮，你希望按钮右对齐、标题居中——这些属于子项内部布局，place-items 管不到。得在子项上单独设 place-self: center 或 justify-self: end。
-
place-self是单个网格项的对齐控制，优先级高于容器的place-items - 图片默认是行内元素，常因基线对齐产生底部空隙，加
vertical-align: top或设为display: block更稳 - 文本居中用
text-align: center，别试图用网格对齐来替代它
IE 不支持 place-items？用 justify-content + align-content 回退
如果你必须兼容 IE11，place-items 和 place-self 都无效。此时只能退回到老式双轴居中法：用 display: grid 配合显式行列定义，再靠 justify-content: center 和 align-content: center 把整个网格内容块推到容器中央。
注意：align-content 在单行/单列网格中才有效；多行网格下它控制的是行与行之间的间距，不是内容对齐。
- IE11 中
grid-template-areas支持有限，尽量避免使用 - 回退方案需配合
grid-template-columns: 100%和grid-template-rows: 100%构造单单元格 - 现代项目建议用
@supports (place-items: center)做特性检测，而非 UA 判断
对称布局真正的难点不在怎么写 CSS，而在于区分清楚：哪一层该由网格控制位置，哪一层该由子元素自己处理内部对齐。很多人卡在嵌套后反复加 justify-content，结果越调越偏——其实只是没搞清作用域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
