Javascript 尝试将文本居中时，动画将消失

我正在使用particles.js设置全屏粒子效果，我使用

height:100vh指定我想要全屏动画这已经非常有效，并且实现了我想要实现的目标。然后，我尝试在我的粒子动画顶部添加文本，然后使用
行高：100vh将其垂直居中。虽然这样做时，我的动画会停止并变成纯灰色背景，而我的文本居中？我想让我的动画继续运行，文字在上面（居中），但我不确定该怎么做才能阻止文字弄乱动画。我在下面附上了一段视频，介绍正在发生的事情


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-->


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

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

我认为这是因为线条高度覆盖了整个视口，即使字体仍然很小（我不能肯定这是真的，这只是一个假设）
请尝试将文本居中的方式更改为：

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

我相信这是因为线条高度覆盖了整个视口，即使字体仍然很小（我不能肯定这是真的，这只是一个假设）
如果你想覆盖文本，尝试将其添加到你的I'd#main text{position:absolute}如果你想覆盖文本，尝试将此添加到您的I'd#主文本{position:absolute}