div 中的居中文本填充了 particlesJS

Question

我正在尝试将 div 中填充了 paticlesJS 库的文本水平和垂直居中。我正在使用 flex-box 方法，但由于某种原因 justify-content:center 不起作用。你能告诉我这是怎么回事吗？提前致谢。这是小代码：

<div style="position: relative; height: 600px;" id="sectionParticles" class="outer">
  <div style="color:white; width: 100%; background-color: rgb(39,50,82); height: 600px; display: flex;align-items: center; justify-content: center;" id="particles-js" class="middle">
    <p style="height: 300px;" class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ex voluptatibus velit sequi ad! Optio deserunt, fugiat excepturi reprehenderit, quaerat, voluptatum facilis fugit explicabo laborum provident consectetur animi officiis, qui! Lorem
      ipsum dolor sit amet </p>
  </div>
</div>

Answer 1

好吧，p 标签肯定是居中的，如果您想将 <p> 中的文本居中，请使用您在 div.

中使用的相同样式

<div style="position: relative; height: 600px;" id="sectionParticles" class="outer">
  <div style="color:white;width: 100%;background-color: rgb(39,50,82);height: 600px;display: flex;align-items: center;justify-content: center;" id="particles-js" class="middle">
    <p style="height: 300px;display: flex;align-items: center;justify-content: center;" class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ex voluptatibus velit sequi ad! Optio deserunt, fugiat excepturi reprehenderit, quaerat, voluptatum facilis fugit explicabo laborum provident consectetur animi officiis, qui! Lorem
      ipsum dolor sit amet </p>
  </div>
</div>

div 中的居中文本填充了 particlesJS

Center text inside a div filled with particlesJS

html

css

flexbox

particles.js