The novel way to center vertically

The modern way to align text or elements vertically does not depend on the flexbox and is supported in all browsers

Until recently, the flexbox layout was the most straightforward way of the few possible twisted approaches to align text or a child element vertically inside a div:

    display: flex;
    align-items: center;  

Text or a child element get nicely vertically centered inside a flex parent:

There is no issue with the flex layout, for sure not with its performance, except that now a new even less verbose CSS property is available.

The best way to align element contents vertically

Since recently instead of two properties display: flex; align-items: center; only one CSS property is sufficient for the vertical alignment of text or a child element: align-content: center;

The CSS property align-content is not new, but until recently is did not work without flex. Now it works in the block elements.

You can see how perfectly align-content works on my sample web page https://marianc000.github.io/alignVertically/