在h5 grid布局中，用justify-self和align-self可单独对齐某网格子元素，优先级高于容器的justify-items/align-items；支持水平垂直独立控制，并可结合margin微调，但不影响文字对齐，需额外设置text-align或flex居中。
在 H5 的 Grid 布局中，单独对齐某个网格内的子元素，核心是使用 justify-self（水平方向）和 align-self（垂直方向）这两个属性，直接写在对应子元素上，就能覆盖容器级的默认对齐设置。
用 justify-self 和 align-self 直接控制单个项目
这两个属性作用于单个网格项（即子元素），优先级高于容器上的 justify-items 和 align-items。例如：
- .item-1 { justify-self: center; align-self: center; } → 让第一个子元素在其网格单元内水平垂直居中
- .item-2 { justify-self: end; align-self: start; } → 第二个子元素右对齐、顶部对齐
- .item-3 { align-self: end; } → 只改垂直方向，底部对齐，水平方向仍按容器 justify-items 执行
注意覆盖逻辑：显式设置即生效
只要子元素写了 justify-self 或 align-self，它就完全脱离容器的 justify-items / align-items 控制。比如容器设了 align-items: stretch，但某个子元素加了 align-self: center，那它就不会拉伸，而是垂直居中。
这个机制让局部调整非常干净，不影响其他子项。
配合 margin 实现更精细的位置微调
当 align-self 不是 stretch 时（比如设为 start / center / end），可以结合 margin 自动计算来进一步定位：
- align-self: start; margin-bottom: auto; → 视觉上等效于底部对齐（适合固定高度容器）
- margin: auto; → 在支持的场景下可辅助居中，但推荐优先用 align-self/justify-self，语义更明确、兼容性更好
别混淆“子元素对齐”和“文字对齐”
align-self 和 justify-self 控制的是整个子元素盒子在网格单元里的位置，不是里面文字的位置。如果文字没居中，要额外处理：
- 水平文字居中：给子元素加 text-align: center
- 垂直文字居中：若子元素有固定高度，可用 line-height: [同高]；更通用方案是设 display: flex; align-items: center; justify-content: center;
