如何垂直方向的中间对齐浮动无名高地的要素是什么？(How to vertically middle-

我有含有未知宽度的两个元素的（水平）为中心外层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;

但我只是好奇，如果有一种方法，与彩车做到这一点。

Answer 1:

你不能直接这样做，因为花车对齐顶端：

如果有一个行框，浮动框的外顶与当前线箱的顶部对齐。

确切的规则说（重点煤矿）：

一个浮动框的外顶不得超过其的顶部更高的包含块。
所述外顶的浮动箱的可能并不比任何的外顶更高块或漂浮由早期的源文档中的元素产生的框。
所述外顶元素的浮箱的可能并不比任何的顶部更高线盒含有由较早的源文档中的元素产生的框。
一个浮动框必须放在尽可能高。

这就是说，你可以利用规则＃4的优势：

将每个浮子内部行内的是建立一种新的元件块格式上下文 / BFC），例如display: inline-block 。
这些包装将包含花车，因为他们建立了BFC，并将于之一，因为它们是内嵌级别旁边其他。
使用vertical-align ，以垂直对齐这些包装。

请注意，某些空间可能的inline-block的包装之间出现。请参阅如何删除inline-block的元素之间的空间？要解决这个问题。

 .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>

Answer 2:

另一种方法是使用flex -它可能是一个更换float ，如果你有两个部分。一个（浮动）会自动调整大小的，第二个会不断增加并占据整个容器。上轴你选择的交叉center ，瞧，您有浮体和中心元素的效果。

下面是有关弹性漂亮的cheatsheet： http://jonibologna.com/flexbox-cheatsheet/

Answer 3:

都能跟得上这是当表格单元格突然看起来像一个伟大的想法。如果它是一个固定的高度，你可以使用的line-height。

文章来源: How to vertically middle-align floating elements of unknown heights?