垂直居中文本窗口高度變量div

所以我希望能夠將我的所有內容集中到特定的div中。有問題的div有一個'高度：100vh;屬性，使之能夠適應觀衆窗口的高度..你可以在http://digitalsix.hostzi.com/垂直居中文本窗口高度變量div

查看我期待在能夠做什麼是中心在任何時候，當窗口已調整包括內容（我意識到一旦它變得太小，那麼它就沒有太多可以做的事了。我想要尋找的一個例子是http://www.pixelbeach.co.uk/

我只是無法找到辦法，如果有人能幫上忙，那就太棒了

標記：

#screenfiller{ 
 
    height: 100vh; 
 
    background-image: url(topbar_1.jpg); 
 
    background-position: center; 
 
}

<div id="screenfiller"> 
 
    <header> 
 
    <a href="#"><img alt="Digital Six Creative" src="logo.svg"></a> 
 
    </header> 
 

 
    <p><a href="#location" class="button_med_white_o">TEST BUTTON</a></p> 
 

 
     </div> 
 
    </div> 
 
    <a name="about"></a> 
 
    </div>

來源

2015-09-18 Kevin John Bain

你可以包裝在一個div容器的內容，並做到：

.container{ 
    position:absolute; 
    top:50%; 
    transform:translateY(-50%); 
}

或者：

#screenfiller{ 
    ... 
    display:table; 
    width:100%; 
} 

.container{ 
    display:table-cell; 
    vertical-align:middle; 
}

採取頭進去，你#screenfiller高度屬性更改爲height: calc(100vh - 340px);其中340px是您的標題的高度。

來源

2015-09-18 13:34:15 Lee

第一個解決方案是我嘗試過的，並且已經接近我正在尋找的東西，但是使用相對定位而非絕對。然而，這些百分比值，或任何，它似乎並沒有居中..我重新上傳使用我有類似的網站，如果你看看：http://digitalsix.hostzi.com/ 新CSS的內容如下：.screen_container充當內容的容器： .screen_container { position：relative; top：50％; transform：translateY（-50％）; text-align：center; } –

對不起，我沒有在發佈前檢查您的網站。你打算做什麼，讓按鈕垂直在圖像內？如果您更改爲絕對定位，它會在視口中居中，但與設計衝突。 – Lee

是的，我希望按鈕（或放在那裏的任何內容）垂直居中。我現在設法讓內容集中在我想要的div內，但在我看來，問題在於#screenfiller div具有屬性height：100vh;無法抵消標識和導航欄內的標題大小。我已經重新上傳，以顯示我的意思：digitalsix.hostzi.com –

垂直居中文本窗口高度變量div

回答

相關問題