Flexbox: Align between bottom and center?

Question

Does anyone know how to create this layout using flexbox?

The text will be placed in the center, and the button will be placed between the text and the bottom.

I have it 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 the text to be in the center and the button between the center and the bottom.

Answer 1

You can try this layout:

• Anonymous item with flex: 1
• Title and subtitles (titles)
• Element with flex: 1 and display: flex .

Elements above and below the heading will receive the available space remaining from the headings in equal amounts. This way the headers will be centered.

These elements can also be flexible 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 will be placed in the center, and the button will be placed between the text and the bottom.

You can use a combination of auto fields with an invisible flexibility element to achieve the layout:

(Edit: I wrote this answer before the question was updated with sample code. Thus, my code is different from the question, but the method is still applied.)

 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

---

In addition, with two minor adjustments, the bottom element may 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 Flex Element Alignment Methods.