我如何垂直居中對齊一個位置：相對元素

Question

我今天嘗試了一些基本的CSS，並且偶然發現了一個問題。我希望有人能幫助我。

如何垂直居中對齊父容器到具有相對位置的畫布？父容器有一個位置爲：絕對的子元素。子元素已定位到父容器的中心。

我爲此創建了一個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。

我希望有幫助！

Answer 2

Demo

給寬度或邊距一半的頂部

現在習慣了這種CSS你itemleft 50%和top 50%和保證金左一半

.container{ 
    position: relative; 
    width: 300px; 
    height: 300px; 
    background-color: red; 
    margin:auto; 
} 

.item{ 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    left:50%; 
    top:50%; 
    margin-left:-50px; 
    margin-top:-50px; 
} 

Demo

如果使用不定位比用於此http://jsfiddle.net/exmRf/16/