CSS
Universal Centering with CSS Grid `place-items`
Learn the simplest way to center any single element perfectly both horizontally and vertically using the powerful `place-items` property in CSS Grid, ensuring robust alignment.
.container {
display: grid;
place-items: center;
min-height: 100vh; /* Example: full viewport height */
border: 1px solid #ccc;
}
.centered-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
How it works: `display: grid` makes the element a grid container. `place-items: center` is a powerful shorthand property that combines `align-items: center` and `justify-items: center`. Together, these properties perfectly center any direct child item within the grid container, both horizontally and vertically, regardless of its intrinsic size, making it ideal for robust single-item centering.