使用flexbox在全高頁面上垂直對齊

我正在嘗試創建一個簡單頁面，其中包含由內容區域分隔的導航欄。我無法強制div #cover垂直居中對齊。我希望我的設計能夠響應，因此我不想在父div div content上指定寬度。我知道我可以使用flex: 1填充該區域的其餘部分，但我嘗試了這一點，但對我無效。使用flexbox在全高頁面上垂直對齊

請看這裏：Codepen

.site-content { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.navbar { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
nav ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    margin: 0 10px; 
 
} 
 
.content { 
 
    display: flex; 
 
    flex: 1; 
 
}

<div class="site-content"> 
 
    <div class="navbar"> 
 
    <div class="title">TitLe</div> 
 
    <nav> 
 
     <ul> 
 
     <li>link1</li> 
 
     <li>link2</li> 
 
     <li>link3</li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
    <div class="content"> 
 
    <div id="cover"> 
 
     Lorem ipsum 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-02-13 user3056783

[對齊兩個撓性項：一個頂端，其他中心]的可能的複製（http://stackoverflow.com/questions/35246718/aligning-two-flex-項酮到的頂最其他爲中心） –

您需要定義height爲.site-content。

.site-content { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; /*new*/ 
}

或設置html，body和.site-content標籤的比例高。

html, body, .site-content { 
    height: 100%; 
}

還根據需要重置body的默認邊距。

body { 
    margin: 0; 
}

要垂直中心#cover，在容器上使用align-items。

.content { 
    display: flex; 
    flex: 1; 
    align-items: center; /*new*/ 
}

Updated Codepen

來源

2016-02-13 15:51:23 Stickers

使用flexbox在全高頁面上垂直對齊

回答

相關問題