Javascript 在身体内垂直对齐我的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8425195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically aligning my div within the body
提问by sazr
Is there a CSS way to vertically align my div within the body element?
有没有一种 CSS 方法可以在 body 元素中垂直对齐我的 div？
The thing is my div will have a different height each time, so its not constant.
问题是我的 div 每次都会有不同的高度，所以它不是恒定的。
These are the things I've tried but they dont work:
这些是我尝试过但不起作用的事情：
body { vertical-align: middle; }
#mainContent {
vertical-align: middle;
}
// Also this
body { margin-top: 20%; margin-bottom: 20%; }
采纳答案by Jesse Atkinson
Honestly, my opinion is often that if you're doing vertical alignment you should still be using a table. I know it's often frowned upon, but it is still the simplest and cleanest way to vertically center something.
老实说，我的观点通常是，如果您要进行垂直对齐，您仍然应该使用表格。我知道它经常被人反对，但它仍然是垂直居中的最简单和最干净的方法。
HTML
HTML
<table>
<tbody>
<tr>
<td>
<div>Your DIV here.</div>
</td>
</tr>
</tbody>
</table>
CSS
CSS
td {vertical-align: middle;}
回答by Vladimir Starkov
I did it without table: (demo on dabblet.com)
我在没有桌子的情况下做到了：（dabblet.com 上的演示）
The main trick in this demo is that in the normal flow of elements going from top to bottom, so the margin-top: autois set to zero. However, for an absolutely positioned element acts the same distribution of free space, and similarly can be centered vertically at the specified topand bottom(does not work in IE7).
这个演示的主要技巧是在元素从上到下的正常流动中，所以margin-top: auto设置为零。然而，对于一个绝对定位的元素，自由空间的分布是相同的，同样可以在指定的top和垂直居中bottom（在 IE7 中不起作用）。
This trick will work with any sizes of div.
这个技巧适用于任何大小的div.
HTML:
HTML：
<div></div>
CSS:
CSS：
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
回答by Kai Qing
A common problem indeed. I have seen many people offering straight css solutions for this but they all require knowing the height of the element needing to be centered, so no help there.
确实是个普遍问题。我见过很多人为此提供直接的 css 解决方案，但他们都需要知道需要居中的元素的高度，所以没有帮助。
I usually do it this way using jquery:
我通常使用 jquery 这样做：
$(document).ready(function(){
site.resize();
$(window).resize(function(){
site.resize();
});
});
var site = {
resize: function(){
var new_margin = Math.ceil(($(window).height() - $('#mainContent').height()) / 2);
$('#mainContent').css('margin-top', new_margin + 'px');
}
};
回答by Wex
Surprisingly (or not), the vertical-aligntool actually works best for this job. Best of all, no Javascript is required.
令人惊讶的是（或不是），该vertical-align工具实际上最适合这项工作。最重要的是，不需要 Javascript。
In the following example, I am positioning the outerclass in the middle of the body, and the innerclass in the middle of the outerclass.
在下面的示例中，我将outer类定位在主体inner的中间，并将outer类定位在类的中间。
Preview: http://jsfiddle.net/tLkSV/513/
预览：http: //jsfiddle.net/tLkSV/513/
HTML:
HTML：
<div id="container">
<span></span><div class="outer">
<span></span><div class="inner">
</div>
</div>
</div>
CSS:
CSS：
html, body {
height: 100%;
margin: 0;
padding: 0; }
#container {
text-align: center;
height: 100%; }
span {
height: 100%;
vertical-align: middle;
display: inline-block; }
.outer {
width: 100px;
height: 200px;
padding: 0;
border: 1px solid #000;
vertical-align: middle;
display: inline-block; }
.inner {
background: red;
width: 30px;
height: 20px;
vertical-align: middle;
display: inline-block; }
Vertical align works by aligning the centers of elements that are next to each other. Applying vertical-align to a single element does absolutely nothing. If you add a second element that has no width but is the height of the container, your single element will move to vertically center with this no-width element, thus vertically centering it. The only requirements are that you set both elements to inline (or inline-block), and set their vertical-align attribute to vertical-align: middle.
垂直对齐的工作原理是对齐彼此相邻的元素的中心。将垂直对齐应用于单个元素绝对没有任何作用。如果您添加第二个没有宽度但与容器高度相同的元素，您的单个元素将移动到此无宽度元素的垂直居中，从而使其垂直居中。唯一的要求是将两个元素都设置为 inline（或 inline-block），并将它们的 vertical-align 属性设置为vertical-align: middle。
Note: You may notice in my code below that my <span>tag and <div>tag are touching. Because they are both inline elements, a space will actually add a space between the no-width element and your div, so be sure to leave it out.
注意：您可能会在我下面的代码中注意到我的<span>标签和<div>标签相互影响。因为它们都是内联元素，所以空格实际上会在无宽度元素和您的 div 之间添加一个空格，因此请务必将其省略。
回答by jmgonet
You can do it without using tables, and without adding extra elements:
您可以在不使用表格的情况下完成此操作，也无需添加额外的元素：
<ul>
<li>One short item</li>
<li>Any real long text...</li>
<li>Another short item</li>
</ul>
And then the CSS:
然后是 CSS：
ul {
list-style-type: none;
display: table-row;
}
li {
display: table-cell;
vertical-align: middle;
}
You can see it here
你可以在这里看到
It would work with any other kind of hierarchy, including div, p, etc.
它适用于任何其他类型的层次结构，包括 div、p 等。
