使用particle.js时居中div

编程问答 2022-04-29

问题描述

我正在使用particle.js 库将粒子用作背景。我想将 div“容器”居中，但我无法使用 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>

解决方法

我认为解决此问题的唯一方法是：

  1. 将画布的 position 设置为 absolute 并使用属性 top、right、bottom 和 left 定位它。
  2. 将画布移动到另一个父 div 并且不让它成为 #container
    3. 的兄弟
,

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

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

centeringhtmlparticle.js