使用CSS 從中心擴展DIV
在這個問題中，我們的目標是創建一個div 從中心擴展的效果，而不是典型的從左上角展開。雖然諸如scale()之類的CSS變換可以實現這種效果，但它們缺乏像素精度，並且不會影響周圍的佈局。
實現這種行為的關鍵在於過渡邊距。透過計算特定的邊距值，我們可以使 div 從中心展開，而不干擾文檔流。
中心展開選項
選項1 ：在預留空間內擴充
<code class="css">#square {
margin: 100px;
transition: width 1s, height 1s, margin 1s;
}
#square:hover {
width: 100px;
height: 100px;
margin: 55px;
}</code>在此選項中， div 在其周圍的預先保留的空間內擴展。邊距過渡的計算方式為初始邊距減去寬度/高度變化的一半。
選項 2：擴充周圍元素
<code class="css">#square {
margin: 0;
transition: width 1s, height 1s, margin 1s;
}
#square:hover {
width: 110px;
height: 110px;
margin: -50px;
}</code>使用此選項， div 擴展到所有周圍的元素。邊距過渡計算為 0 減去寬度/高度變化的一半。
選項 3：擴充並移動其他元素
<code class="css">#square {
position: relative;
transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
width: 110px;
height: 110px;
top: -50px;
left: -50px;
margin-right: -50px;
margin-bottom: -50px;
}</code>此選項允許div 擴充流中的前面的元素，同時移動後續的元素。邊距過渡的計算方式與先前的選項類似。
非方形 DIV 的注意事項
上述選項假定為方形 div，但它們也可以應用於對邊距計算進行輕微調整的非方形 div。例如，寬度和高度不等的矩形可以使用以下邊距進行過渡：
<code class="css">margin: -50px -100px;</code>
總之，透過使用CSS 過渡操作邊距，可以建立一個從中心擴展的div，根據需要影響周圍的佈局。
以上是如何使用 CSS 過渡實現 DIV 元素的居中擴展？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
