Update 1:
Center ‘middle’ div vertically of the whole ‘wrapper’.
.wrapper {
height: 100px;
width: 100px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
border: 1px solid red;
}
.middle,
.bottom {
background: aqua;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}<div class="wrapper">
<div class="middle">middle</div>
<div class="bottom">bottom</div>
</div>Update 2:
Center ‘middle’ div vertically within the available space of ‘wrapper’ minus ‘bottom’.
.wrapper {
height: 100px;
width: 100px;
display: flex;
flex-direction: column;
border: 1px solid red;
}
.middle,
.bottom {
background: aqua;
margin-top: auto;
}<div class="wrapper">
<div class="middle">middle</div>
<div class="bottom">bottom</div>
</div>Previous answer:
The idea is creating an empty placeholder for the top element with CSS pseudo content, and then just use flex-direction: column; + justify-content: space-between; to align all the 3 elements vertically.
Note: the middle div might not be absolutely in the middle when comes to multiple lines of text in the flex items.
.wrapper {
height: 100px;
width: 100px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid red;
}
.wrapper:before {
content: "\00A0";
}
.wrapper>div {
background: aqua;
}<div class="wrapper">
<div>middle</div>
<div>bottom</div>
</div>