Loading

HTML裡上下左右置中的方法

如果您想要成為網站開發人員，HTML是你需要學習的第一個步驟。而隨著行動裝置大環境的需求下，日新月異的HTML5新功能總是能驚艷我們，本文來探討更多你可能不知道的HTML5新功能。

上下左右置中

1. Content Center

簡單明瞭的 display: grid 加上 place-content 讓子元素上下左右置中，算是一種可靠的居中技術。

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

2. Display Flex

與 place-content: center 不同的點在於放大縮小過程中不會更改子元素的大小，會盡可能的堆疊、居中、切割出介面，也是目前最常使用的方式之一。

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

3. Absolute + transform

這是最經典的疊加居中技術，常常使用在popup的彈跳視窗上面。

.gentle-flex {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}