利用 CSS Position 屬性實現元素置中：新手入門指南

更新日期： 2024 年 10 月 29 日

在網頁設計中，「置中」是一個常見需求，特別是當你希望元素在頁面或容器中居中時。

使用 CSS 的 position 屬性，可以輕鬆將元素水平和垂直置中，達到美觀、對齊一致的效果。

今天我們將介紹幾種常見的 CSS 置中方法，適合新手理解和掌握，幫助你設計出更整齊的頁面布局。

為什麼使用 Position 屬性來置中？

在 CSS 中，有許多不同的方法可以置中元素，而 position 屬性是一個靈活且常用的方式。

它可以讓我們相對於父容器，或視窗精確控制元素的位置。

特別適合需要將元素絕對置中的情境。

這種方式讓我們在實現水平和垂直置中時，更加精確且簡單。

使用 CSS Position 置中的四種方法

我們將介紹三種利用 position 屬性進行置中的方法：絕對置中、固定置中和 margin: auto 居中。

每種方法各有優勢，適用於不同場景。

絕對定位置中（Absolute Centering）

當元素的 position 設為 absolute 並參考父元素的大小進行置中時，可以使用 top、left、transform 等屬性來達到效果。

HTML 結構

<div class="container">
  <div class="centered-box">置中內容</div>
</div>

CSS 樣式

.container {
  position: relative; /* 父容器設為 relative，讓子元素以它為參考 */
  width: 400px;
  height: 200px;
  background-color: lightgray;
}

.centered-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 水平和垂直置中 */
  background-color: coral;
  padding: 20px;
  color: white;
}

說明

• position: absolute;：讓子元素的 centered-box 相對於 container 容器進行定位。
• top: 50%; left: 50%;：將元素的左上角定位在父容器的中心位置。
• transform: translate(-50%, -50%);：讓元素的中心點與父容器中心對齊，達到絕對置中效果。

這種方法適合固定大小的容器和子元素，特別是需要精確控制元素位置的情況。

利用 position: fixed 和 transform 置中

當我們希望將元素相對於整個視窗置中，而不隨著滾動而改變位置時，可以使用 position: fixed 進行置中，這在彈窗設計中非常常見。

HTML 結構

<div class="fixed-box">視窗置中內容</div>

CSS 樣式

.fixed-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #333;
  color: white;
  padding: 20px;
  border-radius: 5px;
}

說明

• position: fixed;：讓元素固定在視窗中，即使頁面滾動也保持位置不變。
• top: 50%; left: 50%;：將元素的左上角定位在視窗的中心。
• transform: translate(-50%, -50%);：利用 transform 將元素的中心點與視窗中心對齊，達到置中效果。

這種方法非常適合彈窗、通知框等，能夠讓元素不受滾動影響，始終在視窗中央顯示。

使用 margin: auto 置中

使用 position 屬性搭配 margin: auto 是另一種常用的置中方法，通過設置 top: 0; bottom: 0; left: 0; right: 0; 並將 margin 設為 auto，讓元素自動居中。

HTML 結構

<div class="container">
  <div class="auto-centered-box">自動置中內容</div>
</div>

CSS 樣式

.container {
  position: relative;
  width: 400px;
  height: 200px;
  background-color: lightblue;
}

.auto-centered-box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: tomato;
  padding: 20px;
  color: white;
  width: 100px;
  height: 50px;
}

說明

• position: absolute;：子元素相對於父容器的大小進行定位。
• top: 0; bottom: 0; left: 0; right: 0;：將元素四邊設為 0，使其在容器中處於中間位置。
• margin: auto;：自動調整邊距，使元素居中。

這種方法適合需要居中的固定大小元素，且不需要用到 transform 來調整位置。

使用 inset 簡化置中設置

CSS3 中新增了 inset 屬性，可以用來同時設定 top、right、bottom 和 left，使代碼更簡潔，效果等同於分別指定四個方向的值。

可以將 inset 設置為 0，並搭配 margin: auto 來達到元素的自動置中效果。

CSS 樣式

.auto-centered-box {
  position: absolute;
  inset: 0; /* 等同於 top: 0; right: 0; bottom: 0; left: 0; */
  margin: auto;
  background-color: tomato;
  padding: 20px;
  color: white;
  width: 100px;
  height: 50px;
}

說明

• inset: 0;：這是一種簡寫形式，等同於 top: 0; right: 0; bottom: 0; left: 0;。
• margin: auto;：自動調整元素位置，使其在父容器中居中。

這種方法讓 CSS 代碼更加簡潔，便於閱讀和維護，適合固定大小的元素在父容器中自動置中。

總結

在 CSS 中，使用 position 屬性進行置中，是實現整齊頁面布局的關鍵。

根據不同情境，我們可以選擇絕對定位置中、fixed 定位置中或 margin: auto 配合 inset 進行置中：

• 絕對定位置中：適合在父容器內部精確定位子元素。
• fixed 定位置中：適合需要固定在視窗中央的彈窗或通知。
• margin: auto 配合 inset 置中：讓 CSS 更簡潔，適合固定大小的元素在父容器中自動居中。

通過這些方法，你可以輕鬆地實現頁面元素的水平和垂直置中，讓頁面設計更美觀。

希望這篇文章，幫助新手快速掌握 CSS 中的置中技巧，讓網頁布局更上一層樓！