創建一個始終垂直居中的div

Question

我想將此響應div居中置於頁面中央（始終垂直居中），高度設置爲auto（頁面呈現或加載時的高度）

我讀過關於創建一個幽靈元素，然後將其定位對它？ 我不確定如何去做這件事，如果有人能指導我，那將是非常棒的！

在此先感謝！

HTML

<div class="container"> 
    <div class="responsive"></div> 
</div> 

CSS

.responsive { 
    width: 50%; 
    height: 200px; 
    margin-left: 25%; 
    background: #25BF59; 
} 

http://jsfiddle.net/qSvAQ/55/

Answer 1

試試這個

.responsive { 
 
    width: 50%; 
 
    height: 200px; 
 
    margin-left: 25%; 
 
    background: #25BF59; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class="container"> 
 
    <div class="responsive"></div> 
 
</div>

Answer 2

你可以使用CSS flexbox，這將工作，而不會對.responsive DIV設置任何寬度

.container { 
 
    height:1000px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.responsive { 
 
    width: 50%; 
 
    height: 200px; 
 
    background: #25BF59; 
 
}

<div class="container"> 
 
    <div class="responsive"></div> 
 
</div>

Answer 3

我用雷納德經常描述的技術。另一種方法，如果你用無禮的話，你就不會去砸動畫入禁區是：

$width: 2em; 
$height: 2em; 

.container { 
    position: relative; 
    width: 500px; // some width; 
    height: 500px; // some height; 
} 

.responsive { 
    position: absolute; 
    top: calc(50% - #{0.5*$height}); 
    left: calc(50% - #{0.5*$width}); 
    width: $width; 
    height: $height; 
} 

Answer 4

http://jsfiddle.net/qSvAQ/57/

這一個是容易的，只需要3行代碼：

position: absolute; 
    top: 50%; 
    margin-top: -100px;