如何完美居中固定和絕對定位的div？

修復固定位置 div 的中心對齊

使用傳統方法對絕對定位元素進行中心對齊可能會帶來挑戰。對於固定位置的 div，將 left 屬性設為 50% 並將 margin-left 設為 div 寬度一半的「hack」失敗。

要解決此問題並實現精確居中，更好的解決方案是利用 CSS3變換屬性。即使沒有設定明確的寬度，此方法也可以有效地將div 定位在中心：

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

此解決方案將div 的中心與視窗的中心對齊，確保即使在調整瀏覽器視窗大小時它也保持居中。此外，現代瀏覽器廣泛支援transform屬性。

獎勵：改進絕對定位元素的中心對齊

對於絕對定位的元素，使用以下方法提供了更準確、通用的居中方法：

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

這裡，元素透過變換位置來絕對定位和對齊根據其自身的高度和寬度。此方法提供精確居中，無需調整邊距。

以上是如何完美居中固定和絕對定位的div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！