CSS-文本始终居中的打字机效果

所以，我在网上找到了下面的例子，除了一个我想补充的事实外，它工作得很好。随着打字机效果的应用，左边的字母总是在移动和居中，但我希望我的文本总是居中，并且字母从左到右显示。我如何添加这个

/*全局样式*/
身体{
背景：#333；
垫面：5em；
显示器：flex；
证明内容：中心；
}
/*特定于演示的样式*/
.打字机h1{
颜色：#fff；
字体系列：monospace；
溢出：隐藏；
/*确保在播放动画之前不会显示内容*/
右边框：.15em实心橙色；
/*打字机光标*/
空白：nowrap；
/*将内容保持在一行上*/
保证金：0自动；
/*在键入时提供滚动效果*/
字母间距：.15em；
/*根据需要进行调整*/
动画：输入3.5s步数（30，结束），闪烁插入符号。5s步数结束无限；
}
/*打字效果*/
@关键帧键入{
从{
宽度：0
}
到{
宽度：100%
}
}

猫和帽子。

将

左边距设置为
0
，而不是
auto


/*全局样式*/
身体{
背景：#333；
垫面：5em；
显示器：flex；
证明内容：中心；
}
/*特定于演示的样式*/
.打字机h1{
颜色：#fff；
字体系列：monospace；
溢出：隐藏；
/*确保在播放动画之前不会显示内容*/
右边框：.15em实心橙色；
/*打字机光标*/
空白：nowrap；
/*将内容保持在一行上*/
保证金：0；
右边距：自动；
/*在键入时提供滚动效果*/
字母间距：.15em；
/*根据需要进行调整*/
动画：输入3.5s步数（30，结束），闪烁插入符号。5s步数结束无限；
}
/*打字效果*/
@关键帧键入{
从{
宽度：0
}
到{
宽度：100%
}
}

猫和帽子。