当对 css 中的 `::first-letter` 伪元素设置超大字号时，会导致所在行内内容宽度剧增、基线偏移，从而破坏原有居中效果；根本原因在于容器未显式声明文本对齐方式，仅依赖视觉巧合实现“假居中”。
在您提供的示例中，.MLC 使用了 display: grid 布局，并通过 grid-template-columns: auto 1fr 将 .L3（即 "CCC"）置于左侧网格轨道。此时整个 .MLC 容器在父级 .MT 中确实水平居中了——但这只是容器自身的定位居中，而非其内部文本的对齐。
关键点在于：
- HTML 块级元素（如 <div>）默认 text-align: left（LTR 语言下）；
- 即使所有子元素宽度相近，视觉上看似居中，实则只是“碰巧对齐”，并非真正受控的文本居中；
- 一旦为 .L3::first-letter 设置 font-size: 15rem，首字母 C 渲染为一个极宽的行内框，占据大量水平空间，同时改变整行的 line-height 行高基准和基线位置，导致剩余字符（第二个、第三个 C）被挤向右侧，整体文本块左缘锚定，造成明显左偏。
✅ 正确解法：在 .MLC 上显式声明文本对齐方式：
.MLC {
/* ...原有样式保持不变... */
text-align: center; /* ? 关键修复 */
}这样，无论 ::first-letter 字号多大，浏览器都会将整行文本（包括放大的首字母及其后续字符）以容器中心为基准进行水平对齐。
? 调试建议：遇到类似布局异常时，可临时添加轮廓辅助排查：
* {
outline: 1px dashed rgba(255, 0, 128, 0.5);
}或更精准地作用于目标元素：
.MLC, .L3, .L3::first-letter {
outline: 2px solid lime;
}这能清晰揭示容器边界、内容盒尺寸及伪元素实际渲染区域，避免凭直觉误判。
⚠️ 注意事项：
- text-align: center 仅影响行内内容（文字、图片、inline-block 元素）的水平对齐，不影响 grid 或 flex 子项的位置；
- 若需更精细控制（如首字母垂直居中、字间距微调），可结合 vertical-align、letter-spacing 或 line-height 配合 ::first-letter 使用；
- 在响应式场景中，超大 ::first-letter 可能引发换行或溢出，建议配合 overflow: hidden 或 max-width + word-break 控制。
总之，居中 ≠ 视觉巧合，而是需明确意图并用 text-align、justify-content、place-items 等属性主动声明。
