CSS
Perfectly Center Any Element Horizontally and Vertically with Flexbox
Achieve precise horizontal and vertical centering of content within its parent container using minimal and effective CSS Flexbox properties for perfect alignment.
/* HTML Structure */
/*
<div class="parent-container">
<div class="centered-item">I am perfectly centered!</div>
</div>
*/
/* CSS */
.parent-container {
display: flex; /* Enables flexbox context */
justify-content: center; /* Centers children horizontally */
align-items: center; /* Centers children vertically */
min-height: 200px; /* Example height for parent to demonstrate centering */
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.centered-item {
padding: 1rem;
background-color: #007bff;
color: white;
text-align: center;
}
How it works: This is one of the most powerful and frequently used Flexbox features: effortlessly centering content. By applying `display: flex` to the parent container, it becomes a flex container. Then, `justify-content: center` aligns items along the main axis (horizontally by default), and `align-items: center` aligns them along the cross axis (vertically by default). This combination provides perfect horizontal and vertical centering with just two lines of CSS on the parent.