Vertical align: Flexbox VS Table/Table-cell on elements with unknown height - css

Question

I'm building a website within a CMS. There are quite a few elements that require vertically centered content. However, since I don't have the final content (and whatever content can and will be change in the future) I cannot set a fixed height to those containers.
I just spent a good few minutes trying to figure out why my elements won't vertically align using flexbox...until I found out it's for the lack of a fixed height.
In the past I built such layouts using the display:table/table-cell combination. I started using flexbox models more and more lately and really start to like those and would rather stop using table/table-cell.
Now I wonder how (or if) I could use flexbox to vertically align content no matter what height a container will have.

Answer 1

If your flex container is flex-direction: row (the default orientation), to vertically center content you can use:
align-items: center; /* for a single line of flex items */
align-content: center; /* for multiple lines of flex items */
If your flex container is flex-direction: column, to vertically center content you can use:
justify-content: center;
These methods work without the need to define any heights.
For more details, illustrations, and live demos, see my answer here: https://stackoverflow.com/a/33049198/3597276
From that answer:
Below are two general centering solutions. One for vertically aligned flex items (flex-direction: column) and the other for horizontally aligned flex items (flex-direction: row). In both cases the height of the centered divs can be variable, undefined, unknown, whatever. The height of the centered divs doesn't matter.

Answer 2

May I suggest you use both, like this, as there are still a few IE8/9 users out there and this fallback variant will make it work for them too.
And for other older browser versions that require prefix or use the older flexbox model (like IE10, Safari8/7/6 and some mobile version such as Android, Blackberry, UC Browser), the table version kicks in. More on flexbox support here
html, body {
margin: 0;
height: 100%;
}
.parent {
display: table;
display: flex;
justify-content: center;
/* for this demo */
width: 50%;
height: 50%;
border: 1px solid black;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
display: flex;
align-items: center;
}
<div class="parent">
<div class="child">Centered<br>content</div>
</div>

Answer 3

To vertically center content (or totally centered), you can use CSS transform with translate property. With that method, you don't need to know the size of the element, and combined with a relative parent you achieve a perfect vertical center or horizontal center. See the snippet:
.relative {
position: relative;
width: 400px;
height: 300px;
background-color:yellow;
border: 1px solid black;
margin: 20px 0;
}
.relative .center {
position: absolute;
background-color: black;
color: white;
width: 120px;
height: 150px;
}
.relative .center.vertical {
top: 50%;
-ms-transform: translateY(-50%); /* ie9/ie10 */
-webkit-transform: translateY(-50%); /* safari ios */
transform: translateY(-50%); /* standard */
}
.relative .center.horizontal {
left: 50%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.relative .center.total {
top: 50%;
left:50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="relative">
<div class="center vertical">Vertical center</div>
</div>
<div class="relative">
<div class="center horizontal">Horizontal center</div>
</div>
<div class="relative">
<div class="center total">Total center</div>
</div>