css如何实现图片在div中垂直居中

在前端页面布局中，让图片在div容器内实现垂直居中是十分常见的需求，不同的css实现方式适配不同的场景，开发者可以根据实际项目情况选择最合适的方案。

方案一：使用flex布局实现

flex布局是目前最推荐的布局方式，语法简洁且兼容性较好，只需要给父级div设置对应的flex属性即可实现图片垂直居中，同时还能轻松实现水平居中。

/* 父级div样式 */
.container {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    /* 开启flex布局 */
    display: flex;
    /* 垂直方向居中 */
    align-items: center;
    /* 水平方向居中，可选 */
    justify-content: center;
}
/* 图片样式，可设置最大宽高避免溢出 */
.container img {
    max-width: 100%;
    max-height: 100%;
}

对应的html结构如下：

<div class="container">
    <img src="test.jpg" alt="示例图片">
</div>

方案二：使用position定位实现

position定位是传统的布局方式，适配性更广，适合需要兼容旧版本浏览器的场景，核心思路是通过绝对定位配合transform属性调整图片位置。

/* 父级div样式，需要开启相对定位作为定位参照 */
.container {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
/* 图片样式 */
.container img {
    /* 开启绝对定位 */
    position: absolute;
    /* 顶部偏移50% */
    top: 50%;
    /* 左侧偏移50%，可选实现水平居中 */
    left: 50%;
    /* 反向偏移自身宽高的一半，实现居中 */
    transform: translate(-50%, -50%);
}

方案三：使用table-cell布局实现

table-cell布局模拟表格单元格的特性，也能实现垂直居中效果，适合需要兼容不支持flex的旧环境，且不需要复杂布局的场景。

/* 父级div样式 */
.container {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    /* 模拟表格单元格 */
    display: table-cell;
    /* 垂直居中 */
    vertical-align: middle;
    /* 水平居中，可选 */
    text-align: center;
}
/* 图片样式 */
.container img {
    max-width: 100%;
    max-height: 100%;
}

不同方案的选择建议

可以根据实际场景选择对应的方案：

• 如果项目不需要兼容太旧的浏览器，优先选择flex布局方案，代码简洁维护方便
• 如果需要兼容旧版本浏览器，可选择position定位方案或者table-cell布局方案
• 如果还需要同时实现水平居中，flex和position方案都可以轻松扩展，table-cell方案只需要加text-align属性即可

注意事项

在实现图片垂直居中时，需要注意以下几点：

• 父级div必须设置明确的高度，否则垂直居中效果无法生效，因为高度不确定时浏览器无法计算居中的偏移量
• 如果图片尺寸大于父级div的尺寸，需要给图片设置max-width:100%和max-height:100%避免溢出容器
• 使用position方案时，父级div必须设置position:relative或者position:absolute，否则图片会相对于页面根元素定位

css垂直居中flex布局position定位图片居中修改时间：2026-06-28 03:33:22