andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
af3a2b345ee9986b522b2108344b02ee1580d2bc
30-seconds-of-code/snippets/grid-centering.md
atomiks 11eff23e47 Autoscoping (#103) 
* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction
2018-10-05 09:18:51 +10:00

663 B
Raw Blame History

Grid centering

Horizontally and vertically centers a child element within a parent element using grid.

HTML

<div class="grid-centering">
  <div class="child">Centered content.</div>
</div>

CSS

.grid-centering {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Demo

Explanation

  1. display: grid enables grid.
  2. justify-content: center centers the child horizontally.
  3. align-items: center centers the child vertically.

Browser support

✅ No caveats.