css图片垂直居中

最新推荐文章于 2024-08-29 13:58:39 发布

重复着

最新推荐文章于 2024-08-29 13:58:39 发布

阅读量603

点赞数

分类专栏： web前端开发 css图片垂直居中文章标签： css 图片

本文链接：https://blog.csdn.net/tangxingping520/article/details/48009849

版权

web前端开发同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css图片垂直居中

1 篇文章 0 订阅

订阅专栏

用css来定义图片垂直居中的方法很多，我这里分享几种给大家参考学习学习。

1、图片定高的情况让图片垂直居中效果如下：

（1）、定高的情况比较容易，设置margin-top顶部的外边距是图片外面容器高度减去图片高度除2，就可以居中了。如下面是（300-150）/2=75,所以设置margin-top:75;即可居中，这种兼容性高但是图片大小不够灵活。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片定高的情况让图片垂直居中</title>
	<style>
		.img-box,.mgList-box{width:100%;overflow:hidden;margin:0px;padding:0px;list-style:none;}
		.img-link{width:300px;height:300px;float:left;border:2px solid red;text-align:center;}
		.img-link img{margin-top:75px;}
	</style>
</head>
<body>
	<ul class="img-box">
		<li class="imgList-box">
			<a href="#" class="img-link"><img src="j.gif" width="150" height="150" alt=""></a>
			<a href="#" class="img-link"><img src="j.gif" width="150" height="150" alt=""></a>
			<a href="#" class="img-link"><img src="j.gif" width="150" height="150" alt=""></a>
		</li>
	</ul>
</body>
</html>

2、这种方法是定宽 不定高让图片垂直居中，如果你的图片高度超过了容器总高度，将会取到中间部分，这种做法利用到css3的transform属性。先是容器相对定位，图片绝对定位，然后图片top:50%;加个transform:translateY(-50%);意思是往上变形移动图片高度的一半，这样也达到了居中的效果。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片定高的情况让图片垂直居中</title>
	<style>
		.img-box,.mgList-box{width:100%;overflow:hidden;margin:0px;padding:0px;list-style:none;}
		.img-link{width:300px;height:300px;position:relative;float:left;border:2px solid red;text-align:center;}
		.img-link img{position:absolute;top:50%;transform:translateY(-50%);left:50%;margin-left:-75px;}
	</style>
</head>
<body>
	<ul class="img-box">
		<li class="imgList-box">
			<a href="#" class="img-link"><img src="j.gif" width="150"  alt=""></a>
			<a href="#" class="img-link"><img src="j.gif" width="150"  alt=""></a>
			<a href="#" class="img-link"><img src="j.gif" width="150"  alt=""></a>
		</li>
	</ul>
</body>
</html>

3、利用vertical-align:middle;的方式居中，这种方式也非常棒，兼容性非常好。这种方式是利用以基线对齐的方式达到垂直居中。昵图网上的效果就是这样实现。

先在容器中定一个span标签样式写个display：inline-block;行块。高度定义为容器总高度，宽度为0不占位置，然后再定义个vertical-align:middle;图片也相同定义一个vertical-align:middle两者达到以基线对齐

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片定高的情况让图片垂直居中</title>
	<style>
		.img-box,.mgList-box{width:100%;overflow:hidden;margin:0px;padding:0px;list-style:none;}
		.img-link{width:300px;height:300px;float:left;border:2px solid red;text-align:center;}
		.img-link img{width:150px;vertical-align: middle;border:1px solid #ccc;}
		.inlineBlock{display:inline-block;height:300px;width:0px;overflow:hidden;vertical-align: middle;}
	</style>
</head>
<body>
	<ul class="img-box">
		<li class="imgList-box">
			<a href="#" class="img-link">
				<span class="inlineBlock"></span>
				<img src="Logo.png" width="150"  alt="">
			</a>
		</li>
	</ul>
</body>
</html>

还有其他的办法实现垂直居中这里就不一一例举，想了解的同学留言