CSS
Achieve Perfect Centering with Flexbox
Learn how to perfectly center any element both horizontally and vertically within its parent container using simple Flexbox properties, ideal for modals or hero sections.
.container {
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
height: 100vh; /* Example: full viewport height */
border: 1px solid #ccc;
}
.centered-item {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}
How it works: This snippet demonstrates the most efficient way to perfectly center a single item within a container using Flexbox. By setting `display: flex` on the parent, `justify-content: center` handles horizontal alignment, and `align-items: center` handles vertical alignment. The `height` property on the container ensures it has a defined space for centering.