垂直对齐元素，下方2/3空间以上1/3空间
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了垂直对齐元素，下方2/3空间以上1/3空间相关的知识，希望对你有一定的参考价值。
我有一个“英雄形象”填充视口的高度和宽度。在这个div里面有一个标题。我希望标题垂直对齐，以便任何可用空间高出三分之一，低三分之二。
例如：英雄图像= 1000px高。 H1 = 400 px高。因此上面的空间将= 200px空间低于= 400px
这是一个响应式布局，所以我不知道英雄形象或标题的高度。
使用Flexbox的垂直中心很容易，但我需要更多空间。任何人都可以向我推荐正确的方向吗？
到目前为止，这是我的代码。请注意我之前没有使用过Flex，所以我真的不知道自己在做什么。
.hero_image {
min-height:100vh;
background-color:yellow;
display: flex;
align-items: center;
justify-content: center;
}
.hero_image h1 {
font-size:72px;
padding-top:20px;
}
<div class="hero_image">
<h1>Heading <br>more text <br>last bit of text</h1>
</div>
这是JSFiddle示例https://jsfiddle.net/yvf6tgh8/2/的链接
使你的qazxsw poi成为具有伪元素的qazxsw poi列：
- 把
hero_image送给flexbox，和 flex: 1到before获得效果。
见下面的演示：
flex: 2after你可以使用.hero_image {
min-height: 100vh;
background-color: yellow;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; /* ADDED */
}
.hero_image h1 {
font-size: 72px;
padding-top: 20px;
background: #fff; /* For Illustration */
}
body {
margin: 0;
}
.hero_image:after { /* ADDED */
flex: 2;
content: '';
}
.hero_image:before { /* ADDED */
flex: 1;
content: '';
}，但你需要知道<div class="hero_image">
<h1>Heading <br>more text <br>last bit of text</h1>
</div>。
你可以尝试这样的事情：
calc(33% - <headinghieght>)headingHieght要处理布局部分，我将使用CSS Grid：
CSS网格布局擅长将页面划分为主要区域，或者在从html基元构建的控件的各个部分之间定义大小，位置和图层之间的关系。
与表格一样，网格布局使作者能够将元素对齐到列和行中。但是，使用CSS网格比使用表格更多可能或更容易布局。例如，网格容器的子元素可以自己定位，使它们实际重叠和分层，类似于CSS定位元素。
#container1 {
/*hieght : 100px;*/
border : 2px solid blue;
}
#headingContainer {
margin-top: 33%;
margin-bottom: 66%;
hieght : 40px;
border: 1px solid red;
}
<h1>The calc() Function</h1>
<div id = "container1">
text
<div id = "headingContainer">HEADING</div>
text 2
</div>