HTML/CSS悬停元素居中放大时，如何保持其他元素位置不变？

你的核心问题在于hover时元素未脱离文档流，导致尺寸变化会挤压其他元素或产生间隙。下面是修改后的代码，完全实现需求：

修改后的CSS代码 #

body{
    margin: 5px;
    background-color: rgb(203, 220, 236);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container{
    display: flex; /* 用flex代替float，布局更稳定 */
    gap: 10px; /* 图片间的间隙，替代margin */
    flex-wrap: wrap; /* 屏幕较小时自动换行 */
}
.img-wrapper{
    width: 100px;
    text-align: center;
    position: relative; /* 作为定位基准 */
    transition: all 0.5s ease-in-out; /* 统一过渡效果 */
    cursor: pointer;
}
.img-wrapper:hover{
    position: fixed; /* 脱离文档流，不影响其他元素 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(1deg); /* 居中+旋转 */
    z-index: 999; /* 确保hover元素在最上层 */
    background-color: rgba(255,255,255,0.9); /* 加背景突出显示 */
    padding: 10px;
    font-style: italic;
}
.img-wrapper:hover img{
    transform: scale(6); /* 放大图片，原尺寸100px*6=600px */
}
img{
    width: 100px;
    transition: transform 0.5s ease-in-out; /* 图片过渡效果 */
}

修改后的HTML代码（仅调整container布局逻辑，其余结构不变） #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Portfolio</title>
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <header>
            <h1>My Portfolio</h1>
        </header>
        <div class="container">
            <div class="img-wrapper">
                <img src="images\1.png" alt="drops logo 1">
                <div class="content">Drops Logo 1</div>
            </div>
            <div class="img-wrapper">        
                <img src="images\2.png" alt="Abstract 1">
                <div class="content">Abstract 1</div>
            </div>         
            <div class="img-wrapper">
                <img src="images\3.png" alt="drops logo 2">
                <div class="content">Drops Logo 2</div>
            </div>
            <div class="img-wrapper">
                <img src="images\4.png" alt="Abstract 2">
                <div class="content">Abstract 2</div>
            </div>
            <div class="img-wrapper">
                <img src="images\5.png" alt="Abstract 3">
                <div class="content">Abstract 3</div>
            </div>
        </div>
    </body>
</html>

关键改动说明 #

• 脱离文档流：hover时使用position: fixed，让元素跳出正常布局流，其他元素不会因它的尺寸变化移位。
• 完美居中：top:50%+left:50%配合transform: translate(-50%,-50%)，确保元素始终在视口中心，不受自身尺寸影响。
• 高效放大：用transform: scale()放大图片，比直接修改width性能更好，过渡更平滑。
• 层级控制：z-index:999保证hover元素不会被其他图片遮挡。
• flex布局：替代float解决浮动带来的布局混乱，同时自动处理换行和间隙。

内容的提问来源于stack exchange，提问作者sweatily