How do I center a div using CSS Flexbox?

I'm building a basic website layout and trying to center a div both vertically and horizontally. I read that Flexbox can do this, but I’m not sure about the right way. Can someone guide me with the correct CSS?

To center a div using Flexbox, set the parent element to display as flex. Then use justify-content set to center and align-items set to center. This will align the child element both vertically and horizontally.

Make sure your parent container also has a defined height. Without it, the vertical centering may not work as expected.