如果我可以引导你到以下JSFiddle：
https://jsfiddle.net/93kepaL6/

body {
  background-color: black;
}

.MT {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr;
  row-gap: 0px;
  column-gap: 0px;
}

.MLC {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 2;
  grid-column-end: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  row-gap: 0px;
  column-gap: 0px;
  color: white;
  font-size: 6rem;
  font-family: Arial, sans-serif;
  line-height: 1em;
}

.L1 {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
}

.L2 {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 1;
}

.L3 {
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 1;
}

/*
    .L3::first-letter {
      font-weight: 900;
      font-size: 15rem;
    }
    */

<div class="MT">
  <div class="MLC">
    <div class="L1">AAA</div>
    <div class="L2">BBB</div>
    <div class="L3">CCC</div>
  </div>
</div>

你会注意到文本如预期的那样居中。然而，取消css底部的.L3::first-letter选择器的注解将导致文本偏离中心。此外，增加该选择器中的字体大小将进一步将文本置于左手。
这是为什么呢？