place-self是justify-self和align-self的简写属性，仅对grid和flex容器的直接子元素生效；在grid中需父容器设display: grid，值顺序为justify-self（主轴）在前、align-self（交叉轴）在后，单值则两轴同效，双值可分别控制水平与垂直对齐。
place-self 只对 Grid 和 Flex 容器中的子元素生效，写在项目上才能控制单个项目对齐；直接写在普通 div 或块级容器上完全无效。
place-self 在 Grid 中怎么用才生效
它本质是 justify-self 和 align-self 的简写，顺序固定：第一个值是 justify-self（默认水平方向），第二个是 align-self（默认垂直方向）。
- 只写一个值，如
place-self: center→ 两个方向都居中 - 写两个值，如
place-self: start end→ 水平靠左、垂直靠底 - 必须确保父容器是
display: grid，否则属性被浏览器忽略（连 DevTools 都不显示为“已应用”） - 如果网格有多行多列，
place-self只影响该项目所在单元格内的对齐，不是整个容器 - 想让单个项目“撑满并居中”，得配合
grid-column: 1 / -1; grid-row: 1 / -1;先跨全格，再加place-self: center
place-self 在 Flex 中为什么有时没反应
Flex 是一维布局，place-self 的第二个值（align-self 对应的垂直方向）能生效，但第一个值（justify-self）在 Flex 下语义模糊、支持极差——Chrome 和 Safari 基本无视它，Firefox 行为也不一致。
- Flex 下推荐直接用
justify-content（容器级）或margin-left: auto（项目级）处理主轴对齐 - 交叉轴对齐用
align-self更稳妥，比如align-self: flex-end让某项底部对齐 - 别依赖
place-self: flex-end center这类写法，它在 Flex 中既不可靠，也容易误导自己以为“主轴+交叉轴都控制了” - 如果你真在 Flex 里用了
place-self，只当它是align-self的别名，忽略第一个值
常见失效原因和兼容性兜底方案
即使语法写对，place-self 也可能“看起来没效果”，问题往往不在属性本身，而在上下文。
- 父容器高度塌陷（比如没设
height、min-height，且子项为空）→ 先给父容器明确尺寸，否则“居中”无从谈起 - 子元素用了
position: absolute→ 脱离布局流，place-self失效 - Safari 14.0 及更早版本对
place-self支持不稳定，尤其在嵌套 Grid 中 → 加@supports (place-self: center)检测，回退到分开写justify-self+align-self - IE 完全不支持，Edge 16–18 也不支持 → 生产环境必须提供降级，不能只靠
place-self -
place-self: auto不等于“重置”，而是继承父容器的align-items/justify-items值，容易误判
真正卡住人的从来不是语法记不住，而是花十分钟调 place-self: center 却发现容器本身高为 0 —— 对齐的前提，永远是容器有可对齐的空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
