在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垂直居中对齐。希望这样能够说明我想要实现的内容。

- Jordan Allan

---

请查看我在https://dev59.com/tHI-5IYBdhLWcg3wVWvv#1909802上提供的答复是否符合您的需求。 - Gregory Pakosz

我不确定这会起作用，因为我问题中的“元素1”没有固定的高度。 - Jordan Allan

Answer 1

最简单和干净的方法是使用display: table和vertical-align。但是，据我所知（自从我了解浏览器兼容性问题以来已经有一段时间了），在某些常见的早期版本的IE中，对display: table和相关属性的支持是缺失的。因此，添加其他规则以使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 完全相同，但您可以省略它们中的任何一个（就像我在这里一样，直接在 table 中使用 table-cell），布局引擎会做出明智的决策。

- Kevin Reid

---

澄清一下，为了使这个工作正常，必须从 div 中删除 float。您可以使用 text-align:right 来移动 img2。 - Joel

感谢Kevin提供的简单明了的解决方案。它对我很有效。 - Jordan Allan

Answer 2

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

为确定最佳方法，我们需要了解更多关于您布局的信息。它们在什么中心？元素1和2之间会有很大的Y距离吗？它们的父元素高度固定吗？它们都有相同的父元素，还是其中一个是另一个的兄弟元素？您使用什么方法将它们并排放置？

请记住，许多技巧需要额外的hack才能在IE中正常工作，并且使用Javascript只是作弊，会使您的网站无法访问/令人讨厌的低视力人群（他们可能正在使用脚本不知道的屏幕阅读器），禁用脚本的人（尤其是在移动或命令行浏览器上，如果支持脚本，则可能不支持它们），搜索引擎等。只使用CSS也是可能的（虽然您可能需要添加一些容器元素），但确切的方法取决于您要做什么。

- HyperHacker

Answer 3

如果你只需要支持新的浏览器，比如Safari（例如为iPhone构建Web应用程序），CSS3提供了一种优雅的方法，无需使用浮动或负边距。所有细节请参见：http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center。

- Crashalot

Answer 4

我认为如果没有表格的话，你无法可靠地做到这一点。凯文的解决方案可能有效，除非你需要支持IE（我们中的大多数人都需要）。而且，在这种情况下，表格标记实际上可能比基于div的标记更小。

- Ray

Answer 5

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

- Rodrick Chapman

---

OP希望垂直居中，而不是水平居中。 - Joel