Flexbox centering
Horizontally and vertically centers a child element within a parent element using flexbox.
- Use
display: flex
to create a flexbox layout. - Use
justify-content: center
to center the child horizontally. - Use
align-items: center
to center the child vertically.
<div class="flexbox-centering"> <div>Centered content.</div> </div>
.flexbox-centering { display: flex; justify-content: center; align-items: center; height: 100px; }