在使用particle.js时使div居中

Question

我使用particle.js库来使用粒子作为背景。我想要将div "container“居中，但无法使用flexbox实现，因为在我运行html页面时会插入canvas。请给出一个解决方案。下面是代码。

<div id="particles-js" style=" height:100vh ">
     <div id="container"> content i want to center </div>
     <canvas> Particle js canvas gets inserted here </canvas>
</div>

Answer 1

我认为解决这个问题的方法只有两种：

• 将画布的position设置为absolute，并使用属性top、right、bottom和div将画布定位到另一个父div，并且不让它成为#container

的同级

Answer 2

经过一番努力，我找到了解决方案。

#particles-js{
    position:relative;
}

#container{
    position: absolute;
    width: 100%;
    margin: auto;
    top: 50%;
    transform: translate(0, -50%);
    z-index:5;
}

检查此页面的居中位置：https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/