如何将包含图像（或 Flash）的 <div> 与 CSS 垂直对齐。高度和宽度是动态的。
【问题讨论】：
标签： html css vertical-alignment
捷克网络开发人员 Dušan Janovský 前段时间为此发布了一个跨浏览器解决方案。阅读http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
【讨论】：
divs。这都糟透了。
如果您知道要居中的图像或 Flash 对象的高度，这是可能的。您不需要知道容器的高度/宽度，但您需要知道包含的高度/宽度。
可以使用浮动、清晰和负边距。示例：www.laurenackley.com 主页。
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
#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 **/
}
如果您不知道内部元素的宽度/高度。你对<div> 不走运。但是 -- 表格单元格 (<td>) 确实支持vertical-align:middle; 如果您无法使用上面的 div 内容完成它，请在容器内放置一个表格，然后将您所在的 div在 td 中居中，中间垂直对齐。
【讨论】：
如果您不关心 IE7 及以下版本，则不必使用多个嵌套 div。如果您有一个要垂直对齐的 div，则该 div 位于某个容器内（即使该容器是您的 <body>）。所以你可以在容器上指定display: table-cell和vertical-align: middle，这样你的div就会垂直居中了。
但是，如果您确实关心 IE7 及以下版本，则需要一个额外的容器才能使其工作（是的，通过 hack）。
看看this fiddle。它在 IE6-9 和其他主要浏览器中正确显示。 #container2 仅适用于 IE7 及以下版本，因此如果您不关心它们，可以将其以及 IE 特定的条件样式删除。
【讨论】：
我会推荐 Bruno 的这个解决方案：http://www.brunildo.org/test/img_center.html
但是，我在使用他的 webkit 解决方案时遇到了问题。如果允许空的span 存在，webkit 似乎在div 的顶部呈现了一个小空间。所以，对于我的解决方案，如果我检测到浏览器是 IE，我只会添加空跨度（如果有人想出如何摆脱空间，请告诉我！）所以，我的解决方案最终是：
HTML：
<div class="outerdiv">
<img src="..." />
</div>
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;
}
如果我检测到浏览器是 IE，我会在 img 标记和 css 样式之前添加一个空的 span 元素，因此它看起来像：
<div class="outerdiv ie_vertical_align">
<span></span>
<img src="..." />
</div>
这是带有此代码的JSFiddle。
【讨论】：
您可以通过使用内联块来做到这一点，其中一个带有 height: 100%（HTML 和 BODY 的高度相同）和 vertical-align: middle。
示例 1：http://jsfiddle.net/kizu/TQX9b/（内容很多，所以是全角）
示例 2：http://jsfiddle.net/kizu/TQX9b/2/（任意大小的图片）
在这个例子中我使用spans，所以它可以在没有黑客攻击的情况下在IE中工作，如果你想使用divs，不要忘记为IE添加条件注释.helper, .content { display: inline; zoom: 1; }，所以inline-blocks 适用于块元素。
【讨论】：
inline-blocks，你可以使用white-space: nowrap来防止这种情况：jsfiddle.net/kizu/TQX9b/3
height: 100%; 和position: absolute; jsfiddle.net/TQX9b/256 和position: fixed; 和jsfiddle.net/TQX9b/257 的另一个包装器，您也可以跳过html 和body 样式，这为将其应用于布局提供了更多的灵活性。在 FF、IE7-10 中测试...
vertical-align 在position: absolute 元素中工作的唯一方法：我使用table-cell 的所有其他尝试都没有提升高度。我认为页面上的最佳答案！
display:block 内容一起使用来代替图像，并且当嵌套在响应式固定纵横比元素中时，它也可以正常工作。 Here's an example of both of these 还演示了另一种可能的多行换行文本方法。缺点：标记开始变得有点复杂......
将图片设置为div的背景并居中对齐
【讨论】：
这是一个纯 CSS2 解决方案，用于水平和垂直居中，无需知道容器或子项的大小。不涉及任何黑客行为。我为this answer 发现了它，我也在this answer 中展示了它。
The solution 基于vertical-align: middle 和line-height: 0，其父级具有固定的行高。
HTML：
<span id="center">
<span id="wrap">
<img src="http://lorempixum.com/300/250/abstract" alt="" />
</span>
</span>
还有 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;
}
在 Win7 的 IE8、IE9、Opera 11.51、Safari 5.0.5、FF 6.0、Chrome 13.0 中测试。
唯一需要注意的是 IE7，其中两个最里面的元素必须在一行中声明，如 in this fiddle 所示：
<span id="center">
<span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>
请注意，跨度也是 IE7 所必需的。在其他所有浏览器中，span 可能是 div。
【讨论】：
尝试 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>
【讨论】：
除了此处的其他答案之外，CSS3 flexible box model 还可以让您实现这一目标。
您只需要一个容器元素。里面的所有东西都会按照灵活的盒子模型规则进行布局。
<div class="container">
<img src="/logo.png"/>
</div>
实际上，CSS 非常简单：
.container {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
为简洁起见，我省略了供应商前缀规则。
这是一个 img 始终位于页面中心的演示：http://jsfiddle.net/zn8bm/
请注意，Flexbox 是一项新兴规范，目前仅在 Safari、Chrome 和 Firefox 4+ 中实现。
【讨论】：