使用CSS Grid 實現垂直置中

My tip

如果看不到 codepen playground，請重新整理頁面

See the Pen 你的 CodePen 標題 by Retsnom on CodePen.

index.html

<div class="container">
  <div class="box"></div>
</div>

style.css

html, body
  width: 100%
  height: 100%
  display: flex
  justify-content: center
  align-items: center
.container
  width: 300px
  height: 300px
  background-color: orange
  display: grid
  place-content: center
  //這是一種簡化屬性，同時也設定了 justify-content: center（水平置中）和 align-content: center（垂直置中）。
.box
  width: 100px
  height: 100px
  background-color: blue