Centering a div while using particle.js

Question

I am using particle.js library to use particles as background. I want to center the div "container" but I'm unable to do it using flexbox because canvas is getting inserted when I run the html page. Please give a solution for this. Here is the code.

<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

The only two ways I see to fix this are:

1. Set the position of the canvas to absolute and position it using the properties top, right, bottom and left.
2. Move the canvas to another parent div and not have it be a sibling of #container

Answer 2

After some effort I got the solution

#particles-js{
    position:relative;
}

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

Check this page for centering : https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/