CSS
Perfect Centering with Flexbox or Grid
Learn to perfectly center any element both horizontally and vertically using concise CSS Flexbox or Grid properties for robust layout solutions.
/* Using Flexbox for centering */
.flex-container {
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
min-height: 200px; /* Example height */
border: 1px solid #ccc;
}
/* Using Grid for centering */
.grid-container {
display: grid;
place-items: center; /* Both horizontally and vertically center */
min-height: 200px; /* Example height */
border: 1px solid #ccc;
}
.centered-item {
padding: 20px;
background-color: lightblue;
}
How it works: This snippet demonstrates two highly efficient methods for centering an element within its container. Flexbox uses `justify-content: center` and `align-items: center` to center along the main and cross axes, respectively. Grid offers an even more concise approach with `place-items: center`, which is a shorthand for `align-items: center` and `justify-items: center`, achieving perfect centering in one declaration.