当使用 `::first-letter` 伪元素大幅增大首字母字号时，文本整体水平居中会被破坏——这是因为文本默认左对齐，而首字母放大会改变行内盒的宽度分布，导致视觉偏移。解决方法是在容器上显式声明 `text-align: center`。
在 CSS Grid 布局中，.MLC 容器通过 display: grid 和列模板（grid-template-columns: auto 1fr）实现了自身在父容器中的居中定位，但这仅控制容器块级框的位置，并不控制其内部文本的对齐方式。所有
子元素（.L1、.L2、.L3）默认采用 text-align: start（LTR 下即左对齐），因此它们的内容始终从各自容器的左边缘开始渲染。
当为 .L3::first-letter 设置 font-size: 15rem 后，首字母“C”被渲染为一个远大于其余字符的行内盒，它会占据大量水平空间，并将后续字符向右“推挤”。但由于整个文本行仍以左边界为基准对齐，视觉中心便明显左偏——尤其当其他行（如 .L1 和 .L2）字号未变化时，对比更强烈。
✅ 正确解法是在文本容器上显式设置文本对齐方式：
.MLC {
/* 其他原有样式保持不变 */
color: white;
font-size: 6rem;
font-family: Arial, sans-serif;
line-height: 1em;
/* ✅ 新增：强制子元素内文本水平居中 */
text-align: center;
}⚠️ 注意事项：
- text-align: center 作用于块级容器内的行内内容（包括文字、::first-letter、inline 元素等），不影响 Grid 子项（.L1/.L2/.L3）自身的网格位置；
- 若需进一步微调垂直对齐，可结合 align-items: center（针对 Grid 容器）或 line-height / flexbox（针对单行文本）；
- 调试建议：临时添加 outline: 1px solid red 到相关元素（如 .L3 或 .MLC），直观查看盒模型边界与文本基线关系，快速定位是否是布局错位还是对齐逻辑问题。
总结：CSS 中“居中”有多个层级——容器居中 ≠ 内容居中。::first-letter 放大后引发的偏移本质是行内格式化上下文（IFC）的对齐行为暴露，而非 Grid 布局失效。牢记 text-align 是控制文本对齐的唯一标准属性，而非依赖视觉巧合。
