It can be achieved by display
ing each flex item as a flex
container and then aligning the contents vertically by align-items
property, as follows:
.flex-container {
display:flex;
align-items:center;
height: 200px; /* for demo */
}
.flex-item {
align-self:stretch;
display:flex;
align-items:center;
background-color: gold; /* for demo */
}
<div class="flex-container">
<div class="flex-item">
I want to be vertically centered!
<s>But I'm not.</s>
</div>
</div>
As a side-note, if you omit the align-items:center;
declaration of the .flex-container
you can safely remove align-self:stretch;
from flex items as well.