CSS 定位 置中

情境1: 按鈕在viewport "垂直中間" 的高度
position: absolute; 或 fixed 離開頁面流
top: 50%;
transform: translateY(-50%);

.carousel-button { 
  z-index: 2;
  position: absolute;
  /*  top transform 一起寫  */
  top: 50%;  /* btn元素top 對齊中間水平線 */
  transform: translateY(-50%);   /* btn中心對齊 中間水平線*/
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0 0.5rem;
  background-color: rgba(0, 0, 0, 0.1);
}

CSS3 2D Transforms

Horizontal center:

left: 50%;
transform: translateX(-50%);

Vertical center:

top: 50%;
transform: translateY(-50%);

Both horizontal and vertical:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);