DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Nagarajan R
Nagarajan R

Posted on

Answer: How to center an element horizontally and vertically

CSS Grid: place-items

Finally, we have place-items: center for CSS Grid to make it easier.

HTML

<div class="parent"&gt
  <div class="to-center"></div>
</div>

CSS

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

Output:

html,
body {
  height: 100%;
}

.container {
  display: grid;
  place-items: center;
  height: 100%;
}

.center {
  background:
โ€ฆ

Top comments (0)

Want to rep DEV and be comfy at the same time?

Check out our classic DEV shirt โ€” available in multiple colors.