CSS
Ultimate Centering with CSS Grid's place-items
Discover the simplest way to perfectly center any content both horizontally and vertically within its container using CSS Grid's `place-items` shorthand property.
.center-container-grid {
display: grid;
place-items: center; /* Shorthand for align-items: center and justify-items: center */
width: 100%;
min-height: 300px; /* For demonstration, container needs height */
border: 2px dashed #ccc;
}
.centered-item {
padding: 1.5rem;
background-color: #e0f7fa;
border: 1px solid #00bcd4;
font-weight: bold;
}
How it works: This snippet demonstrates the simplest way to center content using CSS Grid. By setting the parent container to `display: grid` and then applying `place-items: center`, any direct child content will be perfectly centered both horizontally and vertically within that container. This property is a shorthand for `align-items: center` and `justify-items: center`.