垂直置中flex+justify+align

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: flex
  justify-content: center
  align-items: center
.box
  width: 100px
  height: 100px
  background-color: blue