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

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>
评论
情侣~装
情侣~装

You could take the button out of the container (following it) and use a negative margin-top value and text-centering on it:

body {
  margin: 0;
}

.container {
  margin: none;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.bottom {
  margin-top: -3em;
  text-align: center;
}
<div class="container">
  <h1 class="title">
    TITLE
  </h1>

</div>
<div class="bottom">
  <button>I should be at the bottom</button>
</div>
点赞
评论
oqui
oqui

Make your .container position to relative, your .button position set to absolute and apply button: 0. This should work.

点赞
评论