Unable to Centre a div inside a JS rendered div

Question

I have been trying to use particle effect in the background and have some text centred in that div and have the particle effect in the background. The javascript files refer to the particleJS files which you can find here.Github ParticleJS. But Im just not able to centre it in the middle, is it because JS is rendering it simultaneously is there a way I can do it. Link to codepen

body{
  margin:0px;
  padding: 0px;
}

canvas{
  display:block;
  height: 100%;
  vertical-align:bottom;
}

#particles-js{
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

#name{
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
 <script type="text/javascript" href = "particle.js"></script>
 <link rel="stylesheet" media="screen" href="style.css">
 <title>Linko</title>
</head>
<body>
<div id="wrapper">
 <div id="particles-js">
  <script src="particles.js"></script>
     <script src="app.js"></script>
 <div id="name">
  <p>Hello there</p>
 </div>
 </div>
 </div>
</body>
</html>

its centred in its own div I want it to be centred inside the `particles-js` — Mrak Vladar, Jun 26 '19 at 16:04
You have to post a snippet reproducing the problem, this is not enough — Mosè Raguzzini, Jun 26 '19 at 16:05
Sir the JS files are huge you can visit the GitHub link up there, I Hope you understand that getting a files that huge poses formatting problems, I can still try if you want it here — Mrak Vladar, Jun 26 '19 at 16:08
here is the like to the code pen https://codepen.io/badaruddinshaikh/pen/XLezxe — Mrak Vladar, Jun 26 '19 at 16:19

Arfost · Accepted Answer · 2019-07-01T07:00:36.980

You can add position: absolute; to the #name div for him to go above the canvas. Then change align-content:center by align-items:center in #particles-js div.

Here is a updated codepen :)

https://codepen.io/anon/pen/vqWePJ

The position:absolute is needed because HTML element by default (posistion:static) are positioned as a flow, one after another in their parents, so you can't have one overlapping another. Adding the position:absolute to one of the element will remove it from this flow, and position it as if it was alone in his parent, so now it can overlap the others.
You can see this link for more complet explanations on CSS positionning. https://www.w3schools.com/css/css_positioning.asp

For the align-content/align-items issue, align-content is used for multi line alignement, and align-items for alignement in the inverse of the flex box direction.
The naming here is discutable and a bit confusing since justify-content is used for single line alignement in the flex box direction I think, but I was not here during this discussion, they probably had a reason to do it this way.
You can see this question What's the difference between align-content and align-items? for more details on that.

Hey thank You for the solution that solved my problem, but can you tell me where was I going wrong,? — Mrak Vladar, Jun 30 '19 at 10:22

score 0 · Answer 2 · answered Jun 27 '19 at 14:27

0

Try:

#name{
  color: white;
  align-self: center;
}

This will cause the 'name' div to be horizontally centered inside of the 'particles-js' div.

answered Jun 27 '19 at 14:27

mminc

91
1
7

Unable to Centre a div inside a JS rendered div

2 Answers2