如何解决使用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>
解决方法
我认为解决此问题的唯一方法是:
- 将画布的
position
设置为absolute
并使用属性top
、right
、bottom
和left
定位它。 - 将画布移动到另一个父 div 并且不让它成为
#container
的兄弟
经过一番努力,我得到了解决方案
#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/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。