CSS中垂直居中的元素

我有两个并列的元素。元素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垂直居中对齐。希望这能澄清我试图实现的目标。

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

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

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

---

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

最直接、最简洁的方法是使用

display:table

和垂直对齐。但是，IIRC（我已经有一段时间没有讨论浏览器兼容性问题了）对

display:table

和friends的支持不存在于某些常见的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

表

、

tr

和

td

完全相同，但您可以省略其中任何一个值（就像我在这里所做的那样，直接在

表

中使用

表单元格

s）布局引擎会做一些明智的事情。

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

如果您只需要支持Safari等新浏览器（例如，为iPhone构建webapp），CSS3提供了一种优雅的方法，没有浮动或负边距。这里的所有详细信息：

OP想要垂直中心…而不是水平。查看我提供的回复是否适合您的需要。我不确定这是否会起作用，因为我问题中的“元素1”没有固定的高度。为了澄清，必须从div中删除该选项的

浮动

s开始工作。您可以使用

text align:right

移动img2。感谢Kevin提供的简单解决方案。它对我很有用。