How to vertically align one of the flex element childs

Question

I have 3 vertically centered divs in one flex container with flex-direction:column and I need to place 3rd div to the bottom of the container.

This is an explanation of what I want: https://jsfiddle.net/tom8p7be/

How can I make this?

Do you want the 2 centered ones to be centered in regard of the available space down to the last div or their parent? — Asons, Apr 19 '17 at 11:59

Nenad Vracar · Accepted Answer · 2017-04-19T11:59:56.417

You can add margin-top: auto on both first and last child divs. When you add margin-top: auto to last-child div it will push that div to end of parent but it will also push other two divs to top of the parent. That is why you also need to add margin-top: auto to first-child div, and that will position them in the center of space from top to last-child div.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.container div {
  margin: 5px;
  padding: 5px 10px;
  border: 1px solid;
}
.container > div:last-child,
.container > div:first-child{
  margin-top: auto;
}

<div class="container">
    <div>This div should be vertically centered</div>
    <div>This one too</div>
    <div>And this div shoud be placed at the bottom of the flex container</div>
</div>

Thank you! It works for me. – Byteshifter Apr 19 '17 at 11:59 — Byteshifter, Apr 19 '17 at 11:59

How to vertically align one of the flex element childs

1 Answers1