html - 垂直对齐元素，上方 1/3 空间下方 2/3 空间

Question

我有一个“主图”填充了视口(viewport)的高度和宽度。在这个 div 里面有一个标题。我希望标题垂直对齐，以便任何可用空间位于上方三分之一和下方三分之二。

例如:主图 = 1000 像素高。 H1 = 400 像素高。所以上面的空间 = 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/

Answer 1

为了处理布局部分，我将使用 CSS Grid:

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

MDN

Try it online!

.hero_image {
  min-height: 100vh;
  background-color: yellow;
  display: grid;
  grid-template-rows: 1fr auto 2fr; /* here is the fun */
}

.hero_image>.content {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero_image h1 {
  font-size: 72px;
  padding-top: 20px;
}

/* just to show margin */
.hero_image>div:first-child,
.hero_image>div:last-child {
  background: red;
}

body {
  margin: 0;
}

<div class="hero_image">
  <div></div>
  <div class="content">


    <h1>Heading <br>more text <br>last bit of text</h1>
  </div>
  <div></div>
</div>