Flexbox: Align between bottom and center? [duplicate]

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>

Answer 2

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

You can use a combination of auto margins with an invisible flex item to achieve the layout:

(Edit: I wrote this answer before the question was updated with sample code. So my code is different than in the question. But the method still applies.)

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

---

Also, with two minor adjustments, the bottom item can be flush with the edge.

.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

OR, just use 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

---

For more alignment options see: Methods for Aligning Flex Items