Skip to content
About Blog Learn Explore Patterns Case studies
  • Home
  • All patterns
  • Layout patterns

Super centered

Nov 3, 2021

Use place-items: center to center an element within its parent.

First specify grid as the display method, and then write place-items: center on the same element. place-items is a shorthand to set both align-items and justify-items at once. By setting it to center, both align-items and justify-items are set to center.

.parent {
display: grid;
place-items: center;
}

This enables the content to be perfectly centered within the parent, regardless of intrinsic size.

<div class="parent">
  <div class="box" contenteditable="">
    :)
  </div>
</div>
.parent {
  display: grid;
  place-items: center;

  /* Just for parent demo size */
  height: 100vh;
}
Open demo
Last updated: Nov 3, 2021 — Improve article
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.