CSS
Perfectly Center Content Horizontally and Vertically
Easily center any element within its parent container using modern CSS Flexbox or Grid properties for perfect horizontal and vertical alignment.
/* Using Flexbox */
.flex-container {
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
height: 100vh; /* Example: full viewport height */
border: 1px solid #ccc;
}
.flex-item {
padding: 20px;
background-color: lightblue;
}
/* Using Grid */
.grid-container {
display: grid;
place-items: center; /* Shorthand for justify-items & align-items */
height: 100vh; /* Example: full viewport height */
border: 1px solid #ccc;
}
.grid-item {
padding: 20px;
background-color: lightcoral;
}
How it works: This snippet demonstrates two common and effective ways to perfectly center an element within its parent container. Using Flexbox, you set `display: flex` on the parent, then `justify-content: center` to align items along the main axis (horizontally by default) and `align-items: center` for the cross-axis (vertically by default). CSS Grid offers a more concise solution with `display: grid` and the `place-items: center` shorthand, which simultaneously centers content along both the block and inline axes.