this can be used to make text align nicely while still keeping the same layout.

the example below shows how you can set the height of the containing element and still have the text aligned center to that element. so if you had a layout that required the top of the element height to be fixed for some reason, the text still looks ok, unless the text still overflows that element in length.

If the text does still overflow you could then use something like text-overflow ellipsis to clip the additional text with css.

An example of how this can be used to fix a layout would be using the following:

Set a height on the title element, and then use the flex center on the text, and this should then no longer break the layout.

set the height of all of the titles to the longest title height.

and then move it up a bit, and apply the truncate and the flex center. and check how it looks. 

so now after applying the height and the flex alignment the items look like this

you can see how the item #3 does not push down the bottom element. so its good for a title of quite a long length.

here are the css changes to get the above changes

change to the margin on top, and then adding the text to still align left, and then center everything else. so it will vertically align to the center of the div.