Best Solution To Vertical Centering In CSS

As Flexbox gains pretty good support from modern browsers (no IE 10), it is undoubtedly the best solution to center element vertically:

Absolutely easy right? All it needs is having display: flex on the parent element and margin: auto on the child to be centered. Note that when using Flexbox, margin: auto doesn’t only center the element horizontally, but vertically as well.

Moreover, it can be used to vertically center anonymous containers, i.e., text without any wrapper, as well:

We can simply specify fixed dimensions to main and center the text inside it, via the align-items and justify-content properties.