Flexbox：在底部和中心之间对齐？

Question

有人知道如何使用 flexbox 创建这种布局吗？

文本将放置在中间，按钮将放置在文本和底部之间。

我现在有这个：

.aligner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

<div class="aligner">
  <h3>SUPERMAN</h3>
  <p>FTW</p>
  <button>BUTTON</button>
</div>

这会将所有内容居中对齐，但我只希望文本居中，按钮位于居中和底部之间。

Answer 1

The text is going to be placed in the center, and the button is going to be placed between the text and bottom.

您可以结合使用和不可见的弹性项目来实现布局：

（编辑：我在用示例代码更新问题之前写了这个答案。所以我的代码与问题中的代码不同。但该方法仍然适用。）

html, body {
    height: 100%;
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
}

.container > div:nth-child(1) { margin-top: auto; visibility: hidden; }
.container > div:nth-child(2) { margin-top: auto; }
.container > div:nth-child(3) { margin-top: auto; margin-bottom: auto; }

/* non-essential decorative styles */
.container {
    background-color: yellow;
}
.box {
    height: 50px;
    width: 150px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    box-sizing: border-box;
}

<div class="container">
  <div class="box">BUTTON</div><!-- invisible flex item -->
  <div class="box">SUPERMAN</div>
  <div class="box">BUTTON</div>
</div>

jsFiddle

此外，通过两个小调整，底部项目可以与边缘齐平。

.container > div:nth-child(1) { /* margin-top: auto; */ visibility: hidden; }
.container > div:nth-child(2) { margin-top: auto; }
.container > div:nth-child(3) { margin-top: auto; /* margin-bottom: auto; */ }

jsFiddle

或者，只需使用 justify-content: space-between:

.container > div:nth-child(1) { visibility: hidden; }
/* .container > div:nth-child(2) { margin-top: auto; } */
/* .container > div:nth-child(3) { margin-top: auto;  } */

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: yellow;
    height: 100%;
    box-sizing: border-box;
    justify-content: space-between; /* NEW */
}

jsFiddle

有关更多对齐选项，请参阅：

Answer 2

你可以试试这个布局：

具有 flex: 1
标题和副标题(titles)
具有 flex: 1 和 display: flex 的元素。

标题上方和下方的元素将等量占用标题剩余的space。所以标题会居中。

这些元素也可以是弹性容器，您可以根据需要对齐它们内部的内容。

html, body {height: 100% } * { margin: 0; }
.aligner, .below {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.aligner {
  height: 100%;
}
.aligner::before { content: ''; }
.aligner::before, .below {
  flex: 1;
}

<div class="aligner">
  <h3>SUPERMAN</h3>
  <p>FTW</p>
  <div class="below">
    <button>BUTTON</button>
  </div>
</div>

Flexbox：在底部和中心之间对齐？

Flexbox: Align between bottom and center?

html

css

flexbox