CSS
Perfectly Center Content with Flexbox
Learn how to flawlessly center any content, both horizontally and vertically, within its parent container using minimal CSS Flexbox properties.
.container {
display: flex;
justify-content: center; /* Centers content horizontally */
align-items: center; /* Centers content vertically */
height: 100vh; /* Example: full viewport height */
border: 1px solid #ccc;
}
.item {
padding: 20px;
background-color: lightblue;
}
/* HTML structure for the snippet */
/*
<div class="container">
<div class="item">I am perfectly centered!</div>
</div>
*/
How it works: This snippet demonstrates the simplest and most robust way to perfectly center any child element within its parent using Flexbox. By setting `display: flex` on the parent, `justify-content: center` centers items along the main axis (horizontally by default), and `align-items: center` centers them along the cross axis (vertically by default).