CSS：当没有固定大小的div已知时，垂直alignmentdiv
如何将包含图像（或闪光灯）的<div>与CSS垂直alignment。 高度和宽度是dynamic的。
这是一个纯粹的CSS2解决scheme，用于水平和垂直居中，无需知道容器和子项的大小。 没有黑客参与。 我发现这个答案 ，我也在这个答案中展示了它。
该解决scheme基于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上testingIE8，IE9，Opera 11.51，Safari 5.0.5，FF 6.0，Chrome 13.0。
唯一需要注意的是IE7，这两个最内层的元素必须在一行中声明，正如这个小提琴演示的那样 ：
<span id="center"> <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span> </span>
请注意，跨度也是IE7所必需的。 在其他浏览器中，跨度可能是div的。
你可以通过使用内嵌块来实现这一点，一个是height: 100% （ HTML和BODY高度相同）和vertical-align: middle 。
例1： http : //jsfiddle.net/kizu/TQX9b/ （很多内容，所以它是全宽）
示例2： http : //jsfiddle.net/kizu/TQX9b/2/ （任何大小的图像）
在这个例子中，我使用span s，所以它将在IE浏览器中工作，如果你想使用div ，不要忘记添加条件注释IE .helper, .content { display: inline; zoom: 1; } .helper, .content { display: inline; zoom: 1; } .helper, .content { display: inline; zoom: 1; } ，所以内联块可以用于块元素。
除了这里的其他答案之外， CSS3灵活盒子模型还可以帮助你实现这一点。
你只需要一个容器元素。 里面的所有东西都将根据灵活的盒子模型规则进行布置。
<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 +中实现。
我会推荐这个解决scheme由布鲁诺： http : //www.brunildo.org/test/img_center.html
但是，我遇到了一个问题，他的解决schemew / r / t webkit。 看来，如果允许空的span在那里，webkit在div顶部呈现一个小空间。 所以，对于我的解决scheme，我只添加空的跨度，如果我发现浏览器是IE浏览器（如果有人知道如何摆脱空间，让我知道！）所以，我的解决scheme最终是：
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浏览器，我添加一个空的span元素之前的img标签和CSS样式，所以它看起来像：
<div class="outerdiv ie_vertical_align"> <span></span> <img src="..." /> </div>
这是一个JSFiddle这个代码。
捷克网页开发人员DušanJanovský在不久前发表了一个跨浏览器的解决scheme。 阅读http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
如果你不关心IE7和以下，你不必使用多个嵌套的div。 如果你有一个你想垂直alignment的div，那个div在某个容器内（即使容器是你的<body> ）。 因此，您可以在容器上指定display: table-cell和vertical-align: middle ，然后您的div将被垂直居中。
但是，如果你关心IE7及以下版本，你将需要一个额外的容器来使其工作（是的，通过黑客）。
看看这个小提琴 。 它在IE6-9和其他主stream浏览器中正确显示。 #container2仅适用于IE7及其以下版本，因此如果您不关心它们，则可以将其删除以及特定于IE的条件样式。
将图像设置为div的背景并将其alignment
尝试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>
这是可能的，如果你知道的图像或Flash对象的中心的高度。 你不需要知道容器的高度/宽度，但是你需要知道容器的高度/宽度。
有可能使用浮动，清晰和负边距。 例如： http://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里面。
