CSS
Universal Centering with Flexbox and CSS Grid
Learn multiple robust ways to perfectly center any element both horizontally and vertically using modern CSS Flexbox and Grid properties for versatile and responsive layouts.
/* Flexbox Method: Center a single item within a container */
.flex-container {
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
height: 200px; /* Example height */
border: 1px solid #ccc;
}
.flex-item {
/* Your item styles */
padding: 15px;
background-color: lightblue;
}
/* CSS Grid Method: Center a single item within a container */
.grid-container {
display: grid;
place-items: center; /* Shorthand for justify-items & align-items */
height: 200px; /* Example height */
border: 1px solid #ccc;
}
.grid-item {
/* Your item styles */
padding: 15px;
background-color: lightcoral;
}
/* Grid Method 2: Centering content of a parent itself */
.grid-parent-content-center {
display: grid;
justify-content: center; /* Centers content horizontally */
align-content: center; /* Centers content vertically */
height: 200px; /* Example height */
border: 1px solid #ccc;
gap: 10px;
}
.grid-parent-content-center > div {
padding: 10px;
background-color: lightgreen;
}
How it works: This snippet demonstrates three highly effective ways to perfectly center elements using modern CSS. The Flexbox method uses `display: flex;` along with `justify-content: center;` (for horizontal alignment) and `align-items: center;` (for vertical alignment) on the parent container. The first CSS Grid method uses the convenient `place-items: center;` shorthand on the container, which centers child items both horizontally and vertically. The second Grid method, `justify-content: center;` and `align-content: center;`, is used on the container itself to center the grid *tracks* and their content when there's extra space.