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>

（当然样式应该在样式表中；这只是匹配您的原始示例，不知道用例。）

display 值 table、table-row 和 table-cell 基本上与 HTML table、tr 和 td 完全相同，但您可以省略其中任何一个（正如我在这里做，直接在tables 中使用table-cells），布局引擎会做明智的事情。

Answer 2

不容易。一些流行的技巧包括使用 display: table-cell 和使用 display: table 的父级（我不记得是否需要 valign="center" 属性），或者使用 top: 45% 左右的绝对定位（不精确，但对于小元素来说还可以）。

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

请记住，许多技巧需要额外的黑客攻击才能在 IE 中工作，而使用 Javascript 只是作弊，会使视力低下的人（可能正在使用不知道脚本的屏幕阅读器）无法访问/烦扰您的网站，人们禁用脚本（尤其是在可能根本不支持它们的移动或命令行浏览器上）、搜索引擎等。仅使用 CSS 是可能的（尽管您可能必须添加一些容器元素），但确切的方法取决于你到底在做什么。

Answer 3

如果您只需要支持 Safari 等新浏览器（例如，为 iPhone 构建 webapp），CSS3 提供了一种没有浮动或负边距的优雅方法。所有细节都在这里：http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center

Answer 4

我认为如果没有桌子，您将无法可靠地做到这一点。除非您需要支持 IE（我们大多数人都这样做），否则 Kevin 的解决方案可能会起作用。而且，在这种情况下，表格标记实际上可能小于基于 div 的标记。

Answer 5

将它们都放在另一个元素中，给它一个最小宽度并将左右边距设置为自动。