垂直置中absoulate+top+left+transform

My tip

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

---

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

---

index.html

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

style.css

.container
  width: 300px
  height: 300px
  background-color: orange
  position: absolute
  top:50%
  left: 50%
  transform: translate(-50%, -50%)
.box
  width: 100px
  height: 100px
  background-color: blue
  position: absolute
  top:50%
  left: 50%
  transform: translate(-50%, -50%)