垂直居中一个高度未知的div

Question

好的，我知道这个问题被问过很多次，但我没有找到一个跨浏览器的解决方案，也不太明白。:(

我有这段代码可以将视频缩放到100％的浏览器宽度：

<div id="flashposition"><div id="flashvimeo"class="vimeo">HereIsTheVideo</div></div>

并且这个CSS：

#flashposition {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 0px;
height: 0;
z-index:30;
display: block;
overflow:hidden;
}

#flashvimeo object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

它可以工作，但会在底部截断多余的高度，但我希望它能够居中，因此视频的多余高度被削减一半在顶部和底部。有什么安全的想法，也能在IE7上运行吗？还是唯一的方法是使用js / jquery并根据浏览器窗口大小重新计算高度/宽度，就像这里http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php？

- suri

---

你要求的太多了，伙计。抱歉。 - Christian

Answer 1

很抱歉，没有一个优雅的跨浏览器、向后兼容的解决方案可以实现此目标，除非使用脚本。

然而，CSS3支持 box-orient: horizontal; 的 box-flex，这正是你想要的。CSS3 的浏览器支持仍然有些不足，因此如果您需要适用于所有人的解决方案，则需要使用窗口调整大小事件，并通过脚本进行布局。

参考链接：HTML 5 Rocks - flexbox

- Sam Greenhalgh

---

谢谢，我刚刚做了那个，窗口调整大小事件和jQuery。现在一个问题解决了，又出现了一个新的问题。 但我想这就是编程的样子（对我来说不幸的是...） - suri

Answer 2

使用表格元素是在HTML/CSS中垂直居中任何元素的最简单、跨浏览器的方法。另一种方法是使用JS计算容器高度，然后定位。这个答案可能有点令人不悦，但它是有效的。

- Davsket

---

这位男性说得对——不要花太多时间来解决这个问题。如果使用表格可以满足你的需求而不需要引入大量代码或难以跟踪的CSS，请使用表格。 - Daniel Szabo

恐怕我不同意。在非表格内容中使用表格应该是最后的选择之一。不要为了迎合过时的浏览器而降低你标记语言的质量。只需优雅地降级或检测并填充浏览器的短板即可。 - Sam Greenhalgh

Answer 3

这个技巧相当不错：http://css-tricks.com/centering-in-the-unknown/。

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

- Aximili

Answer 4

这个CSS-tricks上的方法在所有浏览器和IE8+中都有效，它是除表格外具有良好浏览器支持的最接近的方法。

演示在这里：http://jsfiddle.net/YqKMH/show/

- Andres Ilich

---

这并不是一个好的解决方案，因为你仍然需要指定高度。 - egr103