如何将项目与全屏目标页面的底部对齐？

由 发布于

To clarify, I have positioned a title in the centre of a full-screen landing page. I would now like to place another item (let's say a div) at the bottom of the page. It would look something like this,

+---------------------------------+
|                                 |
|                                 |
|                                 |
|                                 |
|              TITLE              |
|                                 |
|                                 |
|                                 |
|             button              |
+---------------------------------+

我当前的布局看起来像这样

+---------------------------------+
|                                 |
|                                 |
|                                 |
|                                 |
|              TITLE              |
|              button             |
|                                 |
|                                 |
|                                 |
+---------------------------------+

我正在使用覆盖页面的flexbox，我想知道是否可以在不使用任何绝对定位的情况下将按钮定位在底部。这是我目前的设定

.container {
  margin: none;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
<div class="container">
  <h1 class="title">
    TITLE
  </h1>
  <div class="bottom">
    <button>I should be at the bottom</button>
  </div>
</div>