如何将 div 居中放置在页面中间，即使我更改了 window 大小？

Question

我尝试了 here 上的所有解决方案，但其中 none 有效。无论 window 大小如何，我都想将其水平和垂直居中。

注意：我的 container div 就是我想要的样子。它环绕着其他几个 divs。如果我采用 this link 建议的更改，我的容器 div 就会变得一团糟。我不是在尝试让这个响应。它是一个固定大小（想想图像），我只希望它始终位于 window 的中心，而不管 window 大小如何。

这是我拥有的：

* {
  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>

Answer 1

也许它对你不起作用，因为 container 是绝对的，因此 body 的高度为零。

首先将height: 100%添加到html和body。
使用absolute使用transform到container的absolute位置元素的居中方法：
```
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;
}

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

Answer 2

<div class="shell">
  <div class="container">
    <div class="red">Red</div>
    <div class="green">Green</div>
    <div class="blue">Blue</div>
  </div>
</div>

css:

html, body {
  height: 100%;
}
.shell {
  height: 100%;
  margin: 0;
 text-align: center;
  width: 100%;
}

.shell:before {
  content: ' ';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.container {
  width: 100px;
  color: #fff;
  display: inline-block;
  margin: auto;
  vertical-align: middle;
}

.red {
  background: red;
  height: 100px;
  line-height: 100px;
  width: 100px;
  color: #fff;
  border-radius: 50%;
  margin-bottom: 10px;
}

.green {
  background: green;
  height: 100px;
  line-height: 100px;
  width: 100px;
  color: #fff;
  border-radius: 50%;
  margin-bottom: 10px;
}

.blue {
  background: blue;
  height: 100px;
  line-height: 100px;
  width: 100px;
  color: #fff;
  border-radius: 50%;
}

参见fiddle：https://jsfiddle.net/wLpv9x2o/3/

编辑：这只是一种快速方法，请根据您的需要设置样式

Answer 3

你也可以用 Flexbox 做到这一点（我意识到你在评论中说你不需要这个 'responsive' 或 'flex'）。 Flexbox 将得到这个 "smack-dab in the middle"。需要居中的元素需要有一个父元素取下面的css:

.whatever-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

对于你的示例，我将其包装在 div 中，class 为 light-wrap。我还给了 body 和 html 100% 的高度，这样 .light-wrap 就可以使用百分比值作为高度。如果您运行下面的代码片段，请确保在全屏模式下试一试以获得完整效果。

* {
  margin: 0;
  padding: 0;
}

body, html {
  height:100%;
}

.light-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* height is just to demonstrate  */
  background:#eee;
}

#container {
  background-color: black;
  border-radius: 10px;
  padding: 5px;
  display:inline-block;
  border: 1px solid black;
}

.light {
  height: 100px;
  width: 100px;
  display: block;
  border-radius: 50%;
  margin: 10px;
  border-width: 5px;
  background-color: grey;
}

<div class="light-wrap">
  <div id="container" onclick="changeColor()">

    <div id="green" class="light"></div>
    <div id="yellow" class="light"></div>
    <div id="red" class="light"></div>
  </div>
</div>

如何将 div 居中放置在页面中间，即使我更改了 window 大小？

How do I center a div in the middle of the page, even if I change the window size?

html

css

css-position

vertical-alignment

centering