Html CSS：当不知道 div 的固定大小时垂直对齐 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7206640/
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
CSS: Vertically align div when no fixed size of the div is known
提问by Oleg Tarasenko
How do I align a <div>which contains an image (or flash) vertically with CSS. Height and width are dynamic.
如何<div>使用 CSS 垂直对齐包含图像（或 Flash）的 a。高度和宽度是动态的。
采纳答案by NGLN
This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answerand I also demonstrated it in this answer.
这是一个纯 CSS2 解决方案，用于水平和垂直居中，无需已知容器和子级的大小。不涉及黑客行为。我为这个答案发现了它，我也在这个答案中演示了它。
The solutionis based on vertical-align: middlein conjunction with line-height: 0, which parent has a fixed line-height.
该解决方案基于与vertical-align: middle结合使用line-height: 0，其中父级具有固定的行高。
The HTML:
HTML：
<span id="center">
<span id="wrap">
<img src="http://lorempixum.com/300/250/abstract" alt="" />
</span>
</span>
And the CSS:
和 CSS：
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#center {
position: relative;
display: block;
top: 50%;
margin-top: -1000px;
height: 2000px;
text-align: center;
line-height: 2000px;
}
#wrap {
line-height: 0;
}
#wrap img {
vertical-align: middle;
}
Tested on Win7 in IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.
在 IE8、IE9、Opera 11.51、Safari 5.0.5、FF 6.0、Chrome 13.0 的 Win7 上测试。
The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:
唯一需要注意的是 IE7，它的两个最里面的元素必须在一行中声明，如这个小提琴所示：
<span id="center">
<span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>
Note that the span's are also required for IE7. In every other browser, the span's may be div's.
请注意，IE7 也需要跨度。在所有其他浏览器中，跨度可能是 div。
回答by kizu
You can do this by using inline-blocks, one with height: 100%(and same heights for HTMLand BODY) and vertical-align: middle.
您可以通过使用内嵌块，一个有做到这一点height: 100%（和相同高度的HTML和BODY）和vertical-align: middle。
Example 1: http://jsfiddle.net/kizu/TQX9b/(a lot of content, so it's full width)
示例 1：http: //jsfiddle.net/kizu/TQX9b/（内容很多，所以是全宽）
Example 2: http://jsfiddle.net/kizu/TQX9b/2/(an image with any size)
示例 2：http: //jsfiddle.net/kizu/TQX9b/2/（任意大小的图像）
In this example I use spans, so It would work in IE without hacks, if you'd like to use divs, don't forget to add in Conditional Comments for IE .helper, .content { display: inline; zoom: 1; }, so inline-blocks would work for block elements.
在这个例子中，我使用了spans，所以它可以在 IE 中工作而没有 hacks，如果你想使用divs，不要忘记为 IE 添加条件注释.helper, .content { display: inline; zoom: 1; }，所以内联块将适用于块元素。
回答by Chris
In addition to the other answers here, the CSS3 flexible box modelwill, amongst other things, allow you to achieve this.
除了这里的其他答案之外，CSS3 灵活框模型还可以让您实现这一目标。
You only need a single container element. Everything inside it will be laid out according to the flexible box model rules.
您只需要一个容器元素。它里面的所有东西都将根据灵活的盒子模型规则进行布局。
<div class="container">
<img src="/logo.png"/>
</div>
The CSS is pretty simple, actually:
CSS 非常简单，实际上：
.container {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
I've omitted vendor-prefixed rules for brevity.
为简洁起见，我省略了供应商前缀规则。
Here's a demo in which the img is always in the centre of the page: http://jsfiddle.net/zn8bm/
这是一个 img 始终位于页面中心的演示：http: //jsfiddle.net/zn8bm/
Note that Flexbox is a fledgling specification, and is only currently implemented in Safari, Chrome and Firefox 4+.
请注意，Flexbox 是一个刚刚起步的规范，目前仅在 Safari、Chrome 和 Firefox 4+ 中实现。
回答by rcl
I would recommend this solution by Bruno: http://www.brunildo.org/test/img_center.html
我会推荐布鲁诺的这个解决方案：http: //www.brunildo.org/test/img_center.html
However, I ran into a problem w/ his solution w/r/t webkit. It appears that webkit was rendering a small space at the top of the divif the empty spanwas allowed to be there. So, for my solution I only add the empty span if I detect the browser to be IE (If someone figures out how to get rid of the space, let me know!) So, my solution ends up being:
但是，我遇到了一个问题，他的解决方案 w/r/t webkit。div如果span允许空白存在，则 webkit 似乎在顶部呈现了一个小空间。所以，对于我的解决方案，如果我检测到浏览器是 IE，我只添加空跨度（如果有人想出如何摆脱空间，请告诉我！）所以，我的解决方案最终是：
HTML:
HTML：
<div class="outerdiv">
<img src="..." />
</div>
CSS:
CSS：
.outerdiv {
display: table-cell;
width: 200px;
height: 150px;
text-align: center;
vertical-align: middle;
}
.ie_vertical_align * {
vertical-align: middle;
}
.ie_vertical_align span {
display: inline-block;
height: 150px;
width: 0;
}
And if I detect the browser to be IE I add an empty span element before the imgtag and a css style so it looks like:
如果我检测到浏览器是 IE，我会在img标签和 css 样式之前添加一个空的 span 元素，因此它看起来像：
<div class="outerdiv ie_vertical_align">
<span></span>
<img src="..." />
</div>
Here's a JSFiddlewith this code.
这是带有此代码的JSFiddle。
回答by duri
Du?an Janovsky, Czech web developer, has published a cross-browser solution for this some time ago. Read http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
捷克 Web 开发人员 Du?an Janovsky 不久前为此发布了跨浏览器解决方案。阅读http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
回答by Artyom
If you don't care about IE7 and below, you don't have to use multiple nested divs. If you have a div that you want to align vertically, that div is within some container (even if the container is your <body>). Therefore, you can specify display: table-celland vertical-align: middleon the container, and then your div will be vertically centered.
如果你不关心 IE7 及以下，你不必使用多个嵌套的 div。如果您有一个要垂直对齐的 div，则该 div 位于某个容器内（即使该容器是您的<body>）。因此，您可以在容器上指定display: table-cell和vertical-align: middle，然后您的 div 将垂直居中。
However, if you do care about IE7 and below, you will need an additional container to make it work (yes, via a hack).
但是，如果您确实关心 IE7 及更低版本，则需要一个额外的容器来使其工作（是的，通过 hack）。
Take a look at this fiddle. It displays correctly in IE6-9 and other major browsers. #container2is present solely for IE7 and below, so if you don't care about them, you can remove it as well as the IE-specific conditional styles.
看看这个小提琴。它在 IE6-9 和其他主要浏览器中正确显示。#container2仅适用于 IE7 及以下版本，因此如果您不关心它们，则可以将其以及 IE 特定的条件样式删除。
回答by Benjamin Udink ten Cate
Set the image as background of the div and align it center
将图像设置为 div 的背景并将其居中对齐
回答by RetroCoder
try the 50% padding trick:
尝试 50% 填充技巧：
<html>
<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line;
text-align:center; vertical-align:bottom;
padding: 50% 0 50% 0">test</div>
</body>
</html>
回答by tmsimont
This is possible if you know the height of the image or flash object to be centered. You don't need to know the container's height/width, but you do need to know the contained height/width.
如果您知道要居中的图像或闪光对象的高度，则这是可能的。您不需要知道容器的高度/宽度，但您需要知道包含的高度/宽度。
It's possible using float, clear and negative margins. Example: www.laurenackley.comhomepage.
可以使用浮动、清除和负边距。示例：www.laurenackley.com主页。
html
html
<div id='container'><!-- container can be BODY -->
<div id='vertical-center'> </div>
<div id='contained-with-known-height'>
<p>stuff</p>
</div>
</div>
css
css
#vertical-center{
height:50%;
width:1px;
float:left;
margin-bottom:-50px;/** 1/2 of inner div's known height **/
}
#contained-with-known-height{
height:100px;
clear:left;
margin:0 auto;/** horizontal center **/
width:700px;
text-align:left;
}
#container{/** or body **/
text-align:center;
/** width and height unknown **/
}
If you don't know the inner elements width/height. You are out of luck with <div>. BUT -- table cells(<td>) do support vertical-align:middle;If you can't get it done with the div stuff above, go with a table inside the container, and put the div you are centering inside a td with vertical-align middle.
如果您不知道内部元素的宽度/高度。你运气不好<div>。但是 -表格单元格( <td>) 确实支持vertical-align:middle;如果您无法使用上面的 div 内容完成它，请在容器内放置一个表格，并将您要居中的 div 放在垂直对齐中间的 td 内。
