使用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在全高页面上垂直对齐

回答

相关问题