如何垂直居中对齐未知高度的浮动元素？答案

【问题标题】：How to vertically middle-align floating elements of unknown heights?如何垂直居中对齐未知高度的浮动元素？
【发布时间】：2025-11-27 16:50:02
【问题描述】：

我有一个（水平）居中的外部 div，其中包含两个未知宽度的元素：

<div style='width:800px; margin:0 auto'>
  <div style='float:left'>...</div>
  <div style='float:right'>...</div>
</div>

默认情况下，两个浮动都是顶部对齐的，并且具有不同/未知和不同的高度。有没有办法让它们垂直居中？

我最终制作了外部 div

display: table

和内部 div

display: table-cell;
vertical-align: middle;
text-align: left/right;

但我只是好奇是否有办法用花车做到这一点。

【问题讨论】：

html/css 中的垂直对齐非常丑陋，我渴望用 IE6 的腐烂尸体拍打整个 W3C，然后喂它们。
@MarcB 你并不孤单，但这是我们必须合作的......

标签： css css-float vertical-alignment

【解决方案1】：

不，这是表格单元格突然看起来是个好主意的时候。如果是固定高度，可以使用 line-height。

【讨论】：

如果有人对使用表格进行布局过敏，也可以使用 css 表格（即使在引擎盖下这些表格仍然是表格）。
如果您希望响应式布局自然流动以显示在狭窄视口的左侧元素下方，那么表格就不太好。
@JoelCoehoorn 如果您使用的是 css 表，那是完全不真实的。只需在需要时，在正确的 CSS 查询中将表格显示更改为块显示。
@Babydead 整张桌子......当然。对于同一行中的单个 td 元素，这很奇怪。
@JoelCoehoorn 当然。不过，表格的想法是所有数据都以相同的方式呈现。我想不出这样一种情况，当元素以非响应形式对齐时，您需要元素的行为与其他元素响应不同。我已经建立了 250 多个响应式网站，但从未遇到过任何问题。不过，如果你有一个例子，我很想看看。很好奇！

【解决方案2】：

您不能直接这样做，因为floats 与顶部对齐：

如果有line box，浮动框的外顶对齐与当前行框的顶部。

确切的rules 说（强调我的）：

浮动框的outer top 不得高于其containing block 的顶部。

浮动框的outer top 不得高于任何block 或floated 由源文档中前面的元素。

元素浮动框的outer top 不得高于包含由源文档中前面的元素。

浮动框必须放在尽可能高的位置。

也就是说，您可以利用规则 #4：

将每个浮点数放在inline-level 元素中，这些元素会建立一个新的block formatting context /BFC），例如display: inline-block。
这些包装器将包含浮点数，因为它们建立了一个 BFC，并且因为它们是内联级的，所以它们将彼此相邻。
使用vertical-align 垂直对齐这些包装器。

请注意，内联块包装器之间可能会出现一些空间。请参阅How to remove the space between inline-block elements? 进行修复。

.float-left {
  float: left;
}

.float-right {
  float: right;
}

#main {
  border: 1px solid blue;
  margin: 0 auto;
  width: 500px;
}

/* Float wrappers */
#main > div {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}

<div id="main">
  <div>
    <div class="float-left">
      <p>AAA</p>
    </div>
  </div>
  <div>
    <div class="float-right">
      <p>BBB</p>
      <p>BBB</p>
    </div>
  </div>
</div>

【讨论】：

此解决方案有效，因为您输入 width:49%; 即使没有浮动 div 也可以。
我意识到这肯定有应用程序，但对我来说似乎有点作弊。 float: right 在这里所做的唯一事情就是正确证明 BBB 内容。实际居中的是display: inline-block 和vertical-align: middle。它根本不是真正垂直居中的浮动内容。
浮点数甚至不应该在这里使用。除了像@Simon_Weaver 提到的那样证明内容正确之外，它没有任何用途。相反，最好使用text-align: right，这样 div 高度将成为页面流的一部分，而无需使用 clearfix。
@newms87 可能是真的。但是不会有任何浮动，所以它不会回答这个问题。现在我想我会回答它，即使我有点作弊。
它不能很好地工作还有一个原因——内容垂直居中于自身。如果您手动更改容器的高度，您将看到这两个部分实际上都在容器的顶部。

【解决方案3】：

另一种方法是使用flex——如果你有两个部分，它可以替代float。一个（浮动）将具有自动大小，第二个将增长到占据整个容器。在交叉轴上选择center，瞧，你有浮动和居中元素的效果。

这是关于 flex 的漂亮备忘单：http://jonibologna.com/flexbox-cheatsheet/

【讨论】：

当您尝试use flex 时，您当然会遇到 IE 的恐惧。 :-|
那个备忘单很有用。