当试图对文本进行居中时，动画将消失。

Question

我正在使用particles.js设置一个全屏粒子效果，我指定我希望通过使用height: 100vh;全屏动画，这已经完美地工作并实现了我想要实现的目标。然后，我尝试在我的粒子动画上面添加文本，然后使用line-height: 100vh;进行垂直居中。虽然这样做，我的动画停止和转向一个纯粹的灰色背景和我的文本是中心？我希望我的动画继续运行，上面的文字(居中)，我不知道如何阻止我的文字混乱我的动画。我在下面包括了一段正在发生的事情的视频。

视频(可流)

​

<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%);
}

我相信这是因为线条高度覆盖了整个视口，即使字体仍然很小(我不能肯定这是真的，这只是一个假设)。