CSS

Effortless Centering with CSS Grid

Learn to perfectly center any element horizontally and vertically within its parent using CSS Grid's powerful `place-items` property for simple layouts.

.container {
  display: grid;
  place-items: center; /* Centers both horizontally and vertically */
  min-height: 100vh; /* Example: full viewport height */
  background-color: #f0f0f0;
}

.item {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
}

How it works: This snippet uses CSS Grid to center content. By setting `display: grid` on the parent, its children become grid items. The `place-items: center` property is a powerful shorthand for `justify-items: center` and `align-items: center`, which efficiently centers content along both the block (vertical) and inline (horizontal) axes within the grid cell. This provides a clean and concise way to achieve perfect centering.

Effortless Centering with CSS Grid

Need help integrating this into your project?