即使更改窗口大小，如何将 div 置于页面中间？
Posted
技术标签:
【中文标题】即使更改窗口大小，如何将 div 置于页面中间？【英文标题】：How do I center a div in the middle of the page, even if I change the window size? 【发布时间】：2017-02-05 18:52:27 【问题描述】：我尝试了here 上的所有解决方案，但都没有奏效。无论窗口大小如何，我都想将其水平和垂直居中。
注意：我有我想要的 container div。它围绕着其他几个 div。如果我调整this link 建议的更改，我的容器 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>【问题讨论】：
Best way to center a <div> on a page vertically and horizontally?的可能重复 如果你在#container 上加上一个height 就相当简单了，尽管我知道这可能不是更可取的。
@the12 也试过了。
使用弹性盒子。它无处不在。
@atilkan 我不想让它响应或“灵活”。我只是希望它保持在中间。
【参考方案1】：
您也可以使用 Flexbox 执行此操作（我意识到您在评论中说您不需要这种“响应式”或“弹性”）。 Flexbox 将在中间得到这个“smack-dab”。需要居中的元素需要有一个父元素，其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>【讨论】：
【参考方案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%;
见小提琴：https://jsfiddle.net/wLpv9x2o/3/
编辑：这只是一种快速方法，根据您的需要设置样式
【讨论】：
【参考方案3】：也许它不适合你，因为container 是绝对的，因此body 的高度为零。
首先将height: 100% 添加到html 和body。
对absolutely 定位的元素使用居中方法，使用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>【讨论】：
为什么要给html和body加高度？这是黑客吗？ 如果body 或任何容器的高度为零，则您没有什么可居中的。由于您的container 是绝对的，因此body 的高度为零
但是您可以看到，如果您删除高度，这也有效！
那么变换呢？这是人们通常以事物为中心的方式还是黑客行为？
这是在屏幕中居中绝对/固定定位项目的标准方法之一...以上是关于即使更改窗口大小，如何将 div 置于页面中间？的主要内容，如果未能解决你的问题，请参考以下文章