时间戳

首页 > 解决方案 > 使用particle.js时将div居中

html - 使用particle.js时将div居中

问题描述

我正在使用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>

标签： htmlcsscenteringparticle.js

解决方案

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

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

推荐阅读