Ala*_*anH 4 html css css-position vertical-alignment centering
我在这里尝试了所有解决方案，但没有一个奏效。无论窗口大小如何，我都想水平和垂直居中。
注意：我container按照我想要的方式拥有我的div。它环绕着其他几个 div。如果我调整此链接建议的更改，我的容器 div 就会搞砸。我不是在尝试让它有反应。它是一个固定大小（想想一个图像），我只希望它始终位于窗口的中心，无论窗口大小如何。
这是我所拥有的：
* {
margin: 0;
padding: 0;
}
#container {
background-color: black;
border-radius: 10px;
padding: 5px;
display: block;
margin: auto;
/* changed to auto, didn't make a difference*/
border-width: 1px;
border-color: black;
border-style: solid;
position: absolute;
}
.light {
height: 100px;
width: 100px;
display: block;
border-radius: 50%;
margin: 10px;
border-width: 5px;
background-color: grey;
}<body>
<div id="container" onclick="changeColor()">
<div id="green" class="light"></div>
<div id="yellow" class="light"></div>
<div id="red" class="light"></div>
</div>
</body>也许它绝对不适合您container，因此body高度为零。
添加height: 100%到html和body第一。
使用居中方法对absolutely 定位的元素使用transformto container：
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
让我知道您对此的反馈。谢谢！
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
#container {
background-color: black;
border-radius: 10px;
padding: 5px;
display: block;
margin: 0 auto;
border-width: 1px;
border-color: black;
border-style: solid;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.light {
height: 100px;
width: 100px;
display: block;
border-radius: 50%;
margin: 10px;
border-width: 5px;
background-color: grey;
}