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

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

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.

Tags

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.