当我们使用 CSS 扩展 div 时，它通常从左上角扩展，而中心不变。然而，在某些情况下，我们可能希望扩展从 div 的中心开始。通过创造性的CSS技术，我们可以实现这种效果，如下所述。
要从中心扩展div，关键在于过渡边距。采用公式来调整边距，确保围绕中心点对称展开。
此选项将 div 在其周围的预留空间内展开:
<code class="css">#square {
margin: 100px;
transition: width 1s, height 1s, margin 1s;
...
}
#square:hover {
margin: 55px;
}</code>这里，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>此选项将 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中文网其他相关文章！
