在CSS中垂直居中元素

Question

我有两个并列的元素。元素%2比元素% 1小。这两个元素都没有固定的高度。我需要将元素2垂直居中。如何使用CSS实现这一点？

编辑：

这就是我到目前为止所知道的：

<div id="container" style="width: 100%;">
    <div id="img1" style="float: left;">
        <img src="image1.jpg".../>
    </div>
    <div id="img2" style="float: right;">
        <img src="image2.jpg".../>
    </div>
</div>

Img1的高度将始终大于img2的高度。我希望img2垂直居中对齐。希望这能澄清我想要实现的目标。

Answer 1

最直接、最干净的方法是使用display: table和垂直对齐。然而，IIRC (自从我开始讨论浏览器兼容性问题以来已经有一段时间了)对display: table和朋友的支持从...也许是IE的某个通用版本？无论如何，添加其他规则以在忽略display: table的情况下进行适当的后备可能是好的。

<div id="container" style="display: table;">
    <div id="div1" style="display: table-cell; vertical-align: middle;">
        <img id="img1" src="image1.jpg" />
    </div>
    <div id="div2" style="display: table-cell; vertical-align: middle;">
        <img id="img2" src="image2.jpg" />
    </div>
</div>

(当然，样式应该在样式表中；这只是与原始示例相匹配，而不知道用例。)

HTML值table、table-row和table-cell的性能基本上与display table、tr和td完全相同，但是您可以省略它们中的任何一个(就像我在这里所做的那样，直接在table-cells中使用tables)，布局引擎将做明智的事情。

Answer 2

这可不容易。一些流行的技巧包括使用display: table-cell和使用display: table的父级(我不记得是否需要valign=“valign=”属性)，或者使用顶部的绝对定位: 45%左右(不精确，但对于小元素也可以)。

要确定最佳方法，我们需要更多地了解您的布局。它们以什么为中心？元素1和元素2之间会不会有很大的Y距离？他们的父母有固定的身高吗？他们是有相同的父母，还是一个是另一个的兄弟姐妹？您使用什么方法将它们并排放置？

请记住，许多技巧需要额外的黑客才能在IE中工作，使用Javascript只是作弊，并将使视力低下的人(他们可能使用不知道脚本的屏幕阅读器)、禁用脚本的人(特别是.在移动或命令行浏览器上，可能根本不支持它们)、搜索引擎等。可以只使用CSS (尽管您可能必须添加一些容器元素)，但确切的方法取决于您到底在做什么。

Answer 3

如果你只需要支持Safari这样的新浏览器(例如，为iPhone构建webapp )，CSS3提供了一种优雅的方法，没有浮点数或负边距。详情请点击此处：http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center