嵌套父div后CSS文字打字动画异常的原因及修复咨询

核心问题出在元素宽度的继承关系变化：

• 原结构中，body是flex容器，.typewriter作为flex子项，默认不会撑满父容器，宽度由内部h1的文本内容决定。此时h1的width:100%动画，实际是从0过渡到自身文本的宽度，加上margin:0 auto，自然保持居中。
• 嵌套进.main后，.main是块级元素，.typewriter作为它的子元素默认是块级，宽度会撑满.main的75%。这时h1的width:100%就变成了.main的宽度，文本默认左对齐，margin:0 auto因为宽度拉满失效，最终出现文本被推到左侧的异常。

提供两种简单有效的修复方式：

方案一：让.typewriter保持内容宽度并居中 #

给.typewriter添加margin:0 auto，让它的宽度由内部文本决定，同时在.main中水平居中：

.main {
  background-color: blue;
  height: 300px;
  width: 75%;
}

.typewriter {
  margin: 0 auto; /* 新增：让.typewriter以内容宽度居中 */
}

.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* 原有动画样式不变 */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

方案二：给.main设置flex布局 #

让.main和原body一样成为flex容器，这样.typewriter作为flex子项会自动以内容宽度显示，同时保持居中：

.main {
  background-color: blue;
  height: 300px;
  width: 75%;
  display: flex;
  justify-content: center;
  align-items: center; /* 可选：实现垂直居中 */
}

/* 其他样式保持不变 */

两种方案都能让h1的width:100%动画回归到文本自身宽度，恢复原有的打字机居中效果。

内容的提问来源于stack exchange，提问作者UncaughtDanError