Html 垂直居中 Div 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5746131/
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 Center Div Content
提问by Damien
Possible Duplicate:
center div vertically in a % height div?
可能的重复：
在 % 高度 div 中垂直居中 div？
Hey all, i have a page with some content in it. I need to center the whole thing so that in large resolutions, the content is always in the middle of the page. Two things. first is, if the resolution is small, i want at the very least the content to stop when it gets to the top of the page. I tried doing top:50% height: 680 margin-top:-340px. The problem is that in a smaller resoultion the content goes flying off the page. How do i do this? The nav is in an absolute div at the top, this too has to be centered vertically. Thanks for your help all!
大家好，我有一个页面，里面有一些内容。我需要将整个内容居中，以便在大分辨率下，内容始终位于页面中间。两件事情。首先是，如果分辨率很小，我希望至少内容在到达页面顶部时停止。我试着做 top:50% height: 680 margin-top:-340px。问题是，在较小的分辨率中，内容会飞出页面。我该怎么做呢？导航位于顶部的绝对 div 中，这也必须垂直居中。感谢大家的帮助！
er
呃
回答by Lev
It's possible to vertically center a <div>within another <div>using only css and without explicitly specifying a height or a negative top margin.
The one major drawback of the following technique is that { display: table; }is NOT supported in Internet Explorer < 9.
这是可能的垂直居中<div>内的另一<div>只使用CSS和没有明确指定的高度或负上边距。以下技术的一个主要缺点{ display: table; }是 Internet Explorer < 9 不支持。
If this is your markup:
如果这是您的标记：
<div class="wrapper">
<div class="content">...</div>
</div>
The CSS to get the inner <div>to be centered is:
使内部<div>居中的 CSS是：
.wrapper { display: table; }
.wrapper .content { display: table-cell; vertical-align: middle; }
This works by essentially emulating the naitive layout behavior of <table>elements.
这基本上是通过模拟<table>元素的原始布局行为来实现的。
回答by Obi-wan
try something like this:
尝试这样的事情：
<figure class='logo'>
<span></span>
<img class='photo'/>
and css:
和CSS：
.logo {
display: block
text-align: center;
vertical-align: middle;
border: 4px solid #dddddd;
padding: 4px;
height: 74px;
width: 74px; }
.logo * {
display: inline-block;
height: 100%
vertical-align: middle; }
.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%; }
回答by ezmilhouse
Do the floater trick - insert an empty div above the content, set height to 50% and margin-bottom to the negative content height (content height needs to be fixed).
做浮动技巧 - 在内容上方插入一个空 div，将高度设置为 50%，将 margin-bottom 设置为负内容高度（内容高度需要固定）。
<div id="float">
<div id="content">
Content goes here
</div>
</div>
#float{
float:left;
height:50%;
margin-bottom:-200px;
}
#content {
clear:both;
height:200px;
position:relative;
}
回答by Seth
You could use CSS3 media queries to set different sizes for the different size screen resolutions. This would only work on newer browsers but is easy to implement.
您可以使用 CSS3 媒体查询为不同尺寸的屏幕分辨率设置不同的尺寸。这仅适用于较新的浏览器，但易于实现。
The second thing you could do would be to have javascript check the screen size and adjust accordingly.
您可以做的第二件事是让 javascript 检查屏幕大小并进行相应调整。
回答by Aleski
Out of curiousity, why are you using a topand a negative margin? (margin-top: -340px)
出于好奇，你为什么使用 atop和负边距？( margin-top: -340px)
So is it just resolutions where 340px is more or near half the maximum (a la 800x600px)?
那么它是否只是 340px 大于或接近最大值的一半（la 800x600px）的分辨率？
Id suggest trying something like setting one of the divs to have a min-height. So if you have a wrapper div and place it in there, then it should be ok.
我建议尝试一些类似设置divs 以具有min-height. 所以如果你有一个包装 div 并将它放在那里，那么它应该没问题。
<div id="wrapper">
<div id="centeredDiv" style="position: relative; top50%;>
</div>
</div>
This will force the <div id="wrapper"></div>to be the parent div of <div id="centeredDiv"></div>and the position: relativewill make it so the parent divis treated like the open space, so 50% of its total height will be used. Doing this you could now use min-heightto force the page to scroll, instead of fly off the top of the browser.
这将强制<div id="wrapper"></div>成为其父 div<div id="centeredDiv"></div>并且position: relative将使其成为父 div，因此父div被视为开放空间，因此将使用其总高度的 50%。这样做你现在可以min-height用来强制页面滚动，而不是飞离浏览器的顶部。
回答by Blender
Instead of making a complicated stylesheet or JavaScript code, why not just find the minimum resolution that your site works with? Users with smaller screen sizes would just see scrollbars:
与其制作复杂的样式表或 JavaScript 代码，为什么不直接找到您的网站使用的最低分辨率呢？屏幕尺寸较小的用户只会看到滚动条：
body {
min-height: 700px;
min-width: 700px;
overflow: auto;
}
It's not really a solution, but that's what I would do. Also, have you looked at the otherways to vertically-center a <div>? I'll post links to a few methods.
这不是真正的解决方案，但这就是我要做的。另外，您是否看过其他垂直居中 a 的方法<div>？我将发布一些方法的链接。
