How to Center a DIV with Flexbox

Flex Centered Content

See the Pen yLMjypr by Marcus (@GI-IO5T) on CodePen.

Parent element must be flex
Center horizontally with justify-content:center;
Center vertically with align-items:center;
Setting height to 100vh will make the flex container stretch to 100% of the vertical height of its container. This is done to show off vertical centering in the example, but you may not need it in your code.