CSS: Place Content in the Middle of a Div-Element via Flexbox

Submitted by Peter Majmesku on Mon, 07/31/2017 - 15:03

There are many approaches and often they are tricky. The simplest approach is the following and it does not need any additional wrapper-elements. Just place the CSS inside the selector, which is containing your content. The content will be positioned in the horizontal and vertical middle of the container. Mind that the Flexbox CSS feature is fully supported since IE 11.

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

More nice Flexbox solutions can be found here.