自适应布局下的图片垂直水平居中，自适应手机横竖屏

最新推荐文章于 2026-06-21 13:42:13 发布

原创最新推荐文章于 2026-06-21 13:42:13 发布 · 5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #图片 #布局 #手机 #自适应布局

收录于

Java-Web 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在响应式布局下如何实现图片在div中垂直水平居中，尤其针对手机横竖屏的自适应。通过特定的html结构和css样式设置，实现了在不同屏幕尺寸下图片都能保持居中显示。测试表明这种方法在手机浏览器上表现良好，能适应横屏和竖屏模式。

在html中最常用的功能也是最常见的问题就是图片在div中垂直水平居中问题。
当然水平居中很好办了，div下text-align:center就搞定了，当然前提是图片没有绝对布局。
现在越来越讲究响应式布局，屏幕适配。要求图片的宽高未知，div为全屏大小，横竖屏适应居中
下面就说博主亲测有效的一个方法

html 结构

<div class= "img_frame" id ="img_frame">
    <div class= "center_tool"></div >
    <img class= "image_large" src ="test .jpg">
</div>

css 结构

.img_frame .center_tool{
    display: inline-block;
    vertical-align: middle;
    height: 100% ;
    width: 0px ;
    border: none ;
    padding: 0px ;
    margin: 0px 0px 0px -0.8rem ;
}
.img_frame{
    width: 100% ;
    height:100%;
    overflow: hidden ;
    white-space: nowrap;
}
.img_frame .image_large{
    max-width:100% ;
    max-height:100% ;
    vertical-align: middle;
    display: inline-block ;
    margin-left: 0.3rem;
}