使用絕對定位與 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%)