CSS
Flexbox: Perfect Centering (Horizontal and Vertical)
Easily center any element perfectly within its parent using CSS Flexbox. This snippet demonstrates the optimal properties for both horizontal and vertical alignment.
.flex-container {
display: flex;
justify-content: center; /* Horizontally center items */
align-items: center; /* Vertically center items */
min-height: 100vh; /* Example: full viewport height */
border: 1px solid #ccc;
}
.centered-item {
padding: 20px;
background-color: #f0f0f0;
border: 1px dashed #999;
}
How it works: This snippet uses the `display: flex` property on the parent container. `justify-content: center` centers child items along the main axis (horizontally by default), while `align-items: center` centers them along the cross axis (vertically by default). This combination provides perfect centering for a single item or a group of items within the container.