Question

如何将包含图像（或闪光灯）的<div>与CSS垂直对齐。高度和宽度都是动态的。

Answer 1

这是一个纯粹的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;
}

在IE8，IE9，Opera 11.51，Safari 5.0.5，FF 6.0，Chrome 13.0的Win7上测试。

唯一需要注意的是IE7，其中两个最里面的元素必须在一行声明，如in this fiddle所示：

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>

请注意，IE7也需要跨度。在每个其他浏览器中，跨度可能是div。

Answer 2

您可以使用内联块执行此操作，其中一个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添加条件注释{ {1}}，因此内联块可用于块元素。

Answer 3

除了这里的其他答案之外，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 +中实现。

Answer 4

我会推荐Bruno的这个解决方案：http://www.brunildo.org/test/img_center.html

然而，我遇到了他/ w / r / t webkit解决方案的问题。如果允许空div，那么webkit似乎在span的顶部渲染了一个小空格。所以，对于我的解决方案，我只添加空跨度，如果我检测到浏览器是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。

Answer 5

捷克网络开发人员DušanJanovský已经发布了一个跨浏览器的解决方案。阅读http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 6

如果您不关心IE7及以下版本，则不必使用多个嵌套div。如果你有一个想要垂直对齐的div，那个div就在某个容器中（即使容器是你的<body>）。因此，您可以在容器上指定display: table-cell和vertical-align: middle，然后您的div将垂直居中。

但是，如果您关心IE7及以下版本，则需要一个额外的容器才能使其正常工作（是的，通过黑客攻击）。

看看this fiddle。它在IE6-9和其他主流浏览器中正确显示。 #container2仅适用于IE7及更低版本，因此如果您不关心它们，则可以删除它以及特定于IE的条件样式。

Answer 7

将图像设置为div的背景并将其对齐

Answer 8

尝试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>

Answer 9

如果您知道要居中的图像或闪光对象的高度，则可以执行此操作。您不需要知道容器的高度/宽度，但您需要知道所包含的高度/宽度。

可以使用浮动，清晰和负边距。示例：www.laurenackley.com主页。

<强> HTML

<div id='container'><!-- container can be BODY -->
  <div id='vertical-center'>&nbsp;</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内。

CSS：当没有固定大小的div时，垂直对齐div

9 个答案: