如何使用 CSS 將固定位置 DIV 居中？

將固定位置 DIV 居中

使用 CSS 實現絕對定位元素，在網頁上將固定位置 DIV 居中可以很簡單。駭客攻擊涉及 left: 50%、width: 400px; 和 margin-left: -200px;透過將元素的左邊距設定為其寬度的一半，可以有效地將元素居中。

但是，在處理固定位置 DIV 時，這種方法會失敗。相反，元素的最左上角被放置在 50%，忽略 margin-left 聲明。為了解決這個問題並使固定定位的元素居中對齊，需要另一種方法。

使用CSS3 Transform的解決方案

更有效的方法是利用CSS3的transform屬性，它允許元素的精確定位，而無需依賴邊距。

.centered {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
}

在此程式碼中：

• 位置： fixed 將元素保持在頁面上的固定位置。
• left: 50% 將元素的左邊緣與頁面的 50% 標記對齊。
• transform: translate(-50%, 0) 將元素在負水平方向上偏移其寬度的一半，從而有效地將其居中。

此方法為固定位置元素，即使沒有指定固定或相對寬度。

以上是如何使用 CSS 將固定位置 DIV 居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！