Html 使用particle.js时使div居中

我正在使用particle.js库将粒子用作背景。我想将div“container”居中，但我无法使用flexbox，因为在运行html页面时，画布被插入。 请给出一个解决方案。 这是代码

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

我想要的内容中心
粒子js画布在此处插入

我看到的解决此问题的唯一两种方法是：

将画布的

位置设置为
绝对
，并使用属性
顶部
、
右侧
、
底部
和
左侧
对其进行定位

将画布移动到另一个父div，不要使其成为

#container

---

经过一番努力，我找到了解决办法

#particles-js{
    position:relative;
}

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

检查本页的居中：