CSS
Flexbox for Perfect Horizontal and Vertical Centering
Achieve perfect center alignment for any single item within its parent container, both horizontally and vertically, using a simple and robust Flexbox pattern.
.container {
display: flex;
justify-content: center; /* Centers content horizontally */
align-items: center; /* Centers content vertically */
min-height: 200px; /* Example height to demonstrate vertical centering */
border: 2px dashed #ccc;
background-color: #f9f9f9;
width: 100%;
}
.centered-item {
background-color: #007bff;
color: white;
padding: 20px 30px;
border-radius: 5px;
font-size: 1.2em;
text-align: center;
}
/* --- HTML Structure --- */
<div class="container">
<div class="centered-item">I'm perfectly centered!</div>
</div>
How it works: This snippet demonstrates the simplest and most effective way to center an item within its parent using Flexbox. By setting `display: flex` on the container, `justify-content: center` aligns items along the main axis (horizontally for a default row direction), and `align-items: center` aligns them along the cross axis (vertically). This combination provides perfect centering for a single child item.