javascript - 尝试使文本居中时动画消失

Question

我正在使用 particles.js 来设置全屏粒子效果，我通过使用 height: 100vh; 指定我想要这个动画全屏，这已经完美地实现了我想要的达到。然后，我尝试在我的粒子动画之上添加文本，然后使用 line-height: 100vh; 继续将其垂直居中。虽然这样做时我的动画停止并变成纯灰色背景并且我的文本居中？我希望我的动画继续运行，上面有文本(居中)，我不确定该怎么做才能阻止我的文本弄乱我的动画。我在下面放了一段视频，说明正在发生的事情。

Video (Streamable)

HTML

<div id="particles-js">
  <div id="main-text">Center Me</div>
</div>

<!--Scripts-->
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.js"></script>
<script>
particlesJS.load('particles-js' , 'particles.json', function(){console.log('particles.json loaded...')})
</script>
<!--End Of Scripts-->

CSS

*{
  padding: 0;
  margin: 0;
}

body{
  font-family: sans-serif;
  overflow: hidden;
}

#particles-js{
  background:#4a4a4a; 
  height: 100vh;
}

#main-text{
    text-align: center;
    /* line-height: 100vh; */
}

Answer 1

请尝试将文本居中的方式更改为:

#main-text{
    /*text-align: center;*/
    /* line-height: 100vh; */
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

我相信这是因为行高覆盖了整个视口(viewport)，即使字体仍然很小(我不能肯定地说是这种情况，这只是一个假设)