如何使用 CSS 使 Div 從中心展開？

使用 CSS 從中心擴展 Div

當我們使用 CSS 擴展 div 時，它通常從左上角擴展，而中心不變。然而，在某些情況下，我們可能希望擴展從 div 的中心開始。透過創造性的CSS技術，我們可以實現這種效果，如下所述。

關鍵：透過公式調整邊距

要從中心擴充div，關鍵在於過渡邊距。採用公式來調整邊距，確保圍繞中心點對稱展開。

選項1：在預留空間內展開

此選項將div 在其周圍的預留空間內展開:

<code class="css">#square {
    margin: 100px;
    transition: width 1s, height 1s, margin 1s;
    ...
}
#square:hover {
    margin: 55px;
}</code>

選項2：展開周圍的元素

這裡，div 展開周圍的元素：

<code class="css">#square {
    margin: 0; /*for centering purposes*/
    transition: width 1s, height 1s, margin 1s;
    ...
}
#square:hover {
    margin: -50px; /* 0 - (110px - 10px [= 100px]) / 2 =  -50px */
}</code>

選項3：展開並移動元素文檔流

此選項將div 擴展到流中之前的元素上，並移動其後的元素：

<code class="css">#square {
    position: relative;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    ...
}
#square:hover {
    top: -50px;
    left: -50px;
    margin-right: -50px;
    margin-bottom: -50px;
}</code>

關於非方形元素的注意事項

提供的解決方案最適合方形元素。對於非方形元素，過渡需要針對每個方向進行不同的調整。舉個例子，我們可以將寬度調整為高度的兩倍：

<code class="css">#rectangle {
    transition: width 1s, height 1s, margin 1s;
    ...
}
#rectangle:hover {
    margin: -50px -100px; /* margin: -50px -((initial margin - width change (or height change))/2) */
}</code>

透過遵循這些技巧，我們可以實現將 div 從中心展開的所需效果，而無需借助 JavaScript。

以上是如何使用 CSS 使 Div 從中心展開？的詳細內容。更多資訊請關注PHP中文網其他相關文章！