The last method to vertical centering is by using Flexbox. Flexbox is a new module in CSS3. It offers a more straightforward method for aligning content. To center the content vertically in flex box, simply add
align-items: center;as follows, and that’s it.
Keep in mind that Flexbox some browsers only support partials feature of the Flexbox module such as Internet Explorer 10, Safari, 6, and Chrome 27 and below. Hence, similar to the trick with CSS3 Transform, make sure that the effect falls nicely in these browser.