Question

我在here上尝试了所有解决方案，但都没有奏效。无论窗口大小如何，我都希望水平和垂直居中。

注意：我的container div就像我想要的那样。它包裹着其他几个div。如果我调整this link建议的更改，我的容器div就搞砸了。我没有尝试过这个响应。它是一个固定的大小（想象一个图像），我只是希望它始终位于窗口的中心，无论窗口大小如何。

以下是我所拥有的：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

也许它不适合你，因为container是绝对的，因此body的高度为零。

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

您也可以使用Flexbox执行此操作（我发现在评论中您说您不需要此'响应'或'弹性'）。 Flexbox将获得“中间的轻拍”。需要居中的元素需要具有一个父元素，该元素采用以下css：

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

通过您的示例，我将其包含在div中，其类为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>

Answer 3

<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%;
}

查看小提琴：https://jsfiddle.net/wLpv9x2o/3/

编辑：这只是一种快速方法，根据您的需求设计风格

即使我更改窗口大小，如何将div放在页面中间？

3 个答案: