居中动画文本

Question

你好，在那里，我是一个全新的设计和斗争，因为几天来解决这个问题，但我可能需要一些帮助与你们。以下是我想要实现的结果：

https://tobiasahlin.com/moving-letters/#4

标题必须出现在行的中央，下面是我的结果：

https://codepen.io/Amidamaro/pen/dyMZMYP

HTML：

<h1 class="ml4">
                <span class="letters letters-1">Ready</span>
                <span class="letters letters-2">Set</span>
                <span class="letters letters-3">Go!</span>
            </h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

CSS：

.ml4 {
  
  width: 100%;
  height: 100px;
  position: relative;
  display: flex;
}
.ml4 .letters {
  position: absolute;
  margin: auto;
  left: 0;
  top: 0.3em;
  right: 0;
  opacity: 0;
  justify-content: center;
}

JS：

var ml4 = {};
ml4.opacityIn = [0, 1];
ml4.scaleIn = [0.2, 1];
ml4.scaleOut = 3;
ml4.durationIn = 800;
ml4.durationOut = 600;
ml4.delay = 500;

anime
  .timeline({ loop: true })
  .add({
    targets: ".ml4 .letters-1",
    opacity: ml4.opacityIn,
    scale: ml4.scaleIn,
    duration: ml4.durationIn
  })
  .add({
    targets: ".ml4 .letters-1",
    opacity: 0,
    scale: ml4.scaleOut,
    duration: ml4.durationOut,
    easing: "easeInExpo",
    delay: ml4.delay
  })
  .add({
    targets: ".ml4 .letters-2",
    opacity: ml4.opacityIn,
    scale: ml4.scaleIn,
    duration: ml4.durationIn
  })
  .add({
    targets: ".ml4 .letters-2",
    opacity: 0,
    scale: ml4.scaleOut,
    duration: ml4.durationOut,
    easing: "easeInExpo",
    delay: ml4.delay
  })
  .add({
    targets: ".ml4 .letters-3",
    opacity: ml4.opacityIn,
    scale: ml4.scaleIn,
    duration: ml4.durationIn
  })
  .add({
    targets: ".ml4 .letters-3",
    opacity: 0,
    scale: ml4.scaleOut,
    duration: ml4.durationOut,
    easing: "easeInExpo",
    delay: ml4.delay
  })
  .add({
    targets: ".ml4",
    opacity: 0,
    duration: 500,
    delay: 500
  });

我尝试显示: flex；父对象，并从那里开始将子对象设置为中心，但没有任何变化。感谢您的帮助，谢谢！

Answer 1

嗯!我已经设法解决了这个问题。

CSS：

.ml4 {
  width: 100%;
  height: 100px;
  position: relative;
  display: flex;
  overflow: hidden;
}
.ml4 .letters {
  position: absolute;
  margin: auto;
  left: 0;
  top: 0.3em;
  right: 0;
  opacity: 0;
  text-align: center;
}