垂直居中浮动 div答案

【问题标题】：Vertically center a floating div垂直居中浮动 div
【发布时间】：2014-08-23 12:37:47
【问题描述】：

我有一个 CSS 问题。我即将使用表格而不是 CSS，所以我认为是时候在这里提问了！我做了小提琴来简化一切： http://jsfiddle.net/Rue74/1/

<div id="dashboard_layer">
</div>

我有一个包含 3 个块的图层： - 左侧有 1 个徽标 - 右侧有 1 个标志 - 中间的每个左边的空间

我希望我的两个徽标使用所有垂直空间。（我不希望中心 div 中的任何内容能够位于徽标下）。我希望这两个徽标垂直居中。在中间，我有一个过滤器列表（基本上是按钮）。前两个是“双高”，另一个是“简单高”。我希望它们都在同一行，但如果没有空格，第二行应该从第三个元素开始（因为前两个是双倍高度！），第三行应该从第一个元素开始（作为双倍高度不再影响这条线）。最后一个困难......我希望所有这些按钮都垂直对齐！

我真的不知道如何做到这一点，除了使用表格......这似乎不是最好的解决方案...... 如果您有任何其他想法，请告诉我！

谢谢！

【问题讨论】：

stackoverflow.com/questions/396145/…
谢谢，但这对我没有帮助。我一直在看很多关于垂直对齐的链接，但是当有浮动 div 时，这并不容易......
你对这个到处都是......你到底想要什么？白色 div 横跨整个屏幕？白色 div 要垂直对齐在红色 div 中？

标签： html css alignment vertical-alignment

【解决方案1】：

您可以使用绝对位置（左/右取决于您需要的浮动）

 .selector{
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
 }

http://codepen.io/sebastianekstrom/pen/kzEhe

【讨论】：

【解决方案2】：

看看 Flexbox，你可以很容易地垂直对齐它

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【解决方案3】：

你的 div 有固定高度吗？如果是这样，您可以利用它来发挥自己的优势：

http://jsfiddle.net/stacigh/L6S3j/

.mydiv {
  background-image: url('http://placekitten.com/g/400/300');
  width: 400px;
  height: 300px;
  margin: 0px auto;
  margin-top: calc(50vh - 150px);
}

一些注意事项：子 IE9 不支持 calc()，34 版之前的 webkit 中的 calc() 函数不支持视口单元：http://caniuse.com/#search=vh

【讨论】：