Flexbox: Align between bottom and center? [duplicate]

Question

Does someone know how to create this layout, using flexbox?

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

I have this now:

.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>

This aligns everything in the center, but I want only the text to be in center, and the button between center and the bottom.

Answer 1

You can try this layout:

• Anonymous element with flex: 1
• The title and subtitle (titles)
• Element with flex: 1 and display: flex.

The elements above and below the title will take available space left by titles in equal amounts. So the titles will become centered.

Those elements can also be flex containers, and you can align their contents inside them as desired.

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>