css图片垂直居中自适应

最新推荐文章于 2022-09-26 17:44:38 发布

幻想山外小楼听雨

最新推荐文章于 2022-09-26 17:44:38 发布

阅读量1.1w

点赞数 7

分类专栏： CSS笔记文章标签：图片自适应 div 垂直居中容器

本文链接：https://blog.csdn.net/promiseCao/article/details/52774328

版权

CSS笔记专栏收录该内容

19 篇文章 2 订阅

订阅专栏

我们在应用图片的时候经常会碰到要让图片在容器里居中的情况，水平居中很简单直接给容器添加text-align: center;就ok了。那么垂直居中呢？是不是给img加vertical-align: middle;就可以了呢？

答案显然是否定的，单纯的给img加vertical-align: middle;并不能行，我平时用的比较多的办法有两种。

方法一：

<style type="text/css">
	body,p {
		margin: 0;
		padding: 0;
		}
	div {
		width: 300px;
		height: 300px;
		border: 1px solid #c6c6c6;
		margin: 50px auto;
		text-align: center;
		}
	a {
		display: inline-block;
		vertical-align: middle;
		}
	span {
		display: inline-block;
		width: 0;
		height: 100%;
		vertical-align: middle; 
		}
	img {
		border: 1px solid #00f;
		}
	
</style>
</head>

<body>
<div>
    	<a href="#"><img src="images/img_03.jpg" /></a><span></span>
</div>
</body>

我的做法是添加一个空的span标签，然后给span标签设置成100%的高再让它居中，这样就能让a标签页同时居中。有些人会问你为啥要给img包a标签呢？实际应用中我们的图片经常都是需要可以被点击的跳转链接的。如果你的图片不需要被点击你也可以直接把vertical-align: middle; 加在img中。像这样

img {
		border: 1px solid #00f;
		vertical-align: middle;
		}
<div>
    	<img src="images/img_03.jpg" />
</div>

效果是一样的。
方法二：

div {
	position: relative;
    width: 100%;
    height: 238px;
}
img {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
<div>
    	<img src="images/img_03.jpg" /><span></span>
</div>

通过绝对定位，垂直和水平都居中了

方法三：

这个很简单，之间用 (div高 - 图片高) /2 然后设置margin-top 就ok了，但这么做不能够自适应，纯靠人工计算显得有点蠢。

下面是两种方法的实现效果图：

这里写图片描述

写得不对的地方欢迎交流指正，码字不易，拒绝未沟通情况下转载。CSDN博客：PromiseCao;

所有博客已转移至个人博客地址：www.clramw.top