如何垂直居中对齐位置：相对元素

Question

我今天正在尝试一些基本的CSS，我偶然发现了一个问题。我希望有人能帮助我。

如何将父容器垂直居中对齐到具有位置的画布：相对于它？父容器有一个子元素，其position：absolute。子元素已定位到父容器的中心。

我为此创建了一个JSFiddle。 http://jsfiddle.net/exmRf/

干杯， 维恩。

Answer 1

一种解决方案是用两个包装器包裹你的.container;给第一个display: table;和height: 100%; width: 100%;以及第二个display: table-cell;和vertical-align: middle;。另外，请确保body和html有全高。

这是一个小小的工作演示：little link。

另一种方法是将top: 50%;应用于.container和margin-top: -150px;（300px / 2 = 150px）。 （请注意，此方法要求您知道容器的确切高度，因此可能不完全符合您的要求，但它也可能是！）。后一种方法的一个小工作演示：another little link。

我希望有所帮助！