使用 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。对于非方形元素，边距调整的计算可能会略有不同，具体取决于所需的比例调整大小。