如何使旋轉元素完美居中，尤其是在螢幕大小調整期間？

居中元素無法居中，尤其是在螢幕調整大小時

三角形指針的水平對齊仍然難以捉摸，特別是在窗口大小調整期間。

罪魁禍首在於錯誤地使用了 left: 48% to center三角形。雖然這看起來使元素居中，但實際上它將指針的左邊緣放置在其容器的中心附近。

對於真正的居中，正確的方法是 left: 50%，它將指標的中心與元素的中心對齊容器。然而，這引入了一個新問題：當使用 left: 50% 時，元素會向右移動。

解決方案是使用帶有 translate(-50%,0) 的 Transform 屬性。此規則指示三角形向左移動其寬度的 50%，有效地將其居中於先前的同一直線上。

但是，在這種特定情況下，同時應用 Transform:rotate(45deg) 和 Transform:translate (-50%,0) 提出了挑戰。級聯覆蓋了第二個變換規則，使其無效。

要解決此問題，需要連結變換函數。修正後的程式碼是：

.container::before {
    top: -33px;
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
    position: absolute;
    border: solid #C2E1F5;
    border-width: 4px 0 0 4px;
    background: #88B7D5;
    content: '';
    width: 56px;
    height: 56px;
}

此修改後的程式碼現在可以正確地將三角形指標居中，並且即使在調整螢幕大小時也能保持其位置。

以上是如何使旋轉元素完美居中，尤其是在螢幕大小調整期間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！