30 seconds of CSS

  Back to Home

Flexbox centering  layout

Horizontally and vertically centers a child element within a parent element using flexbox.

HTML
<div class="flexbox-centering"><div class="child">Centered content.</div></div>
CSS
.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
Demo
Centered content.
Explanation
  1. display: flex enables flexbox.
  2. justify-content: center centers the child horizontally.
  3. align-items: center centers the child vertically.
Browser support

100.0%

⚠️ Needs prefixes for full support.