Horizontal & Vertical centring using flexbox module

Aligning content vertically inside a DIV or a box has always been an issue in CSS. There was some tricks available with display: table and display: table-cell properties. But it was never convenient to implement, until flexbox module came into the existence.

With Flexbox, one can align anything (vertically or horizontally) with the align-items and justify-content properties.

The align-items property specifies the vertical alignment of contents inside the flex container and the justify-content property allows the content to align horizontally.

Code you need to use for horizontal and vertical centring of content is:

display: flex;
align-items: center;
justify-content: center;

Note:You can use flexbox modules for particular parts of your page, its not mandatory to create whole layout using flexbox properties.