使用CSS 從中心擴展Div

在CSS 轉換領域，人們可能會想像div 元素從其中心軸優雅地擴展，而不是從左上角和左上角展開的預設行為。然而，如果沒有 JavaScript，這種期望的效果就會帶來挑戰。

解決方案：操縱邊距

實現這種居中擴展的關鍵在於使用特定的轉換 div 的邊距公式。該技術涉及計算目標尺寸和初始尺寸之間的差異並將結果除以二。然後，該值將在轉換過程中用作負邊距調整。

自訂選項：

根據所需的行為，可以使用三個主要選項：

選項1：保留空間

此選項將div 在其周圍保留的空間內展開，保留周圍的元素不受影響。

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: 55px; /* calculated as initial margin - ((width change and height change)/2) */
}

選項 2：覆蓋周圍元素

透過設定負邊距，此選項會導致 div 擴展到附近的元素，重疊其內容。

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: -50px; /* calculated as 0 - ((width change and height change)/2) */
}

選項 3：移動周圍元素

此變體會移動 div 並將後續元素沿著文件流向下移動。

#square {
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
    top: -50px; /* calculated as initial top - ((new height - initial height)/2) */
    left: -50px; /* calculated as initial left - ((new width - initial width)/2) */
    margin-right: -50px;
    margin-bottom: -50px;
}

注意： 這些計算適用於方形 div。對於非方形元素，邊距調整的計算可能會略有不同，具體取決於所需的比例調整大小。