位置：广州松河 > 技术支持 > 图片居中：任意图片在div里的上下垂直都居中！_CSS学习

图片居中：任意图片在div里的上下垂直都居中！_CSS学习

来源：网络整理时间：2023/3/4 1:04:22 共 3627 浏览

任意一个图片，在div中都居中显示，这是比较常用的CSS，很多刚学习的新手却并不知道！

<style type="text/css"> 

   div{ border:1px solid #ccc; 

    height:500px; width:500px; line-height: 500px;

    text-align:center;

    background:#ccc;} 

   img{ vertical-align:middle;max-width: 100%;max-height: 100%; }

</style>

<div class="test"><img src="test3.jpg"></div>

或者:

<style type="text/css"> 
   div{ border:1px solid #ccc; 
    height:500px; width:500px; 
    text-align:center;
    background:#ccc;} 
   img{ vertical-align:middle;max-width: 100%;max-height: 100%; } 
   div span{ height:100%; width:0; overflow:hidden; display:inline-block; vertical-align:middle; } 
</style>
<div class="test"><img src="test3.jpg"><span></span></div>

第一段CSS和第二段有什么不同呢？第一段CSS使用了line-height: 500px;，第二段没有line-height，CSS和HTML却都多了span，都实现一样的效果！

可能会有疑问，比如图片后面加入span干什么呢？难道是标题的用途？NO！

span是为img撑开空间用的，img比较特殊，不会撑起上下空间，图片本身的尺寸只能限制图片，上下居中，必须有span为它撑开一定垂直空间，它在一定空间中才可以！

第一段中没有使用span，一样垂直居中了，又是如何办到的？因为div的CSS使用了line-height: 500px;，就已经用行高撑起了空间，所以无需span！两种方法都可以，但具体到实际代码中可以挑选其中一种！

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS3 object-fit:cover 剪裁图片尺寸适配div - 居中并裁剪图片_CSS学习 | ·下一条：CSS 背景图片铺满浏览器，任何情况下都铺面整个浏览器_CSS学习