Question

我一直试图在背景中使用粒子效果，并在该div中居中放置一些文本，并在背景中使用粒子效果。 javascript文件是指particleJS文件，您可以在这里找到。Github ParticleJS。但是Im只是不能将其居中，这是因为JS同时渲染它是否可以实现。 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>

Answer 1

您可以将position: absolute;添加到#name div中，以使他位于画布上方。然后在＃particles-js div中将align-content:center更改为align-items:center。

这是更新的Codepen ：）

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

position:absolute是必需的，因为默认情况下HTML元素（posistion:static）作为流定位，在其父级中一个接一个地放置，因此不能有一个重叠。将position:absolute添加到其中一个元素会将其从该流中删除，并将其放置为好像在其父级中一样，因此现在可以与其他元素重叠。
您可以看到此链接，以获取有关CSS定位的更多完整说明。 https://www.w3schools.com/css/css_positioning.asp

对于align-content / align-items问题，align-content用于多行对齐，align-items用于在伸缩框方向的反方向对齐。
由于justify-content用于我认为在flex box方向上的单行对齐，因此此处的命名是有争议的，并且有些混乱，但是在本次讨论中我不在这里，他们可能有这样做的理由。 br /> 您可以查看问题What's the difference between align-content and align-items?以获得更多详细信息。

Answer 2

尝试：

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

这将导致“名称” div在“ particles-js” div内水平居中。

无法将div居中到JS呈现的div中

2 个答案: