Using Flexbox to Perfectly Center a div Within Another div

I was playing around with Flexbox again and man do I love it! I used to have to use Javascript to find the parent height and child height and then do the math to make sure it was perfectly centered horizontally and vertically. Thanks to Flexbox, no Javascript is necessary. You just need to make an outer div as the flex container and then put your elements within child div. The result is a perfectly centered div.

Feel free to play around with the pen. Change the width and height to see how it maintains its position.

See the Pen Centering div with a div by Galastun (@galastun) on CodePen.