css-使不同大小的图片在固定大小的容器中居中_图片在指定宽高容器中心对齐-CSDN博客

本文链接：https://blog.csdn.net/hahahhahahahha123456/article/details/80609171

方法一：

.imgbox{
    position: relative;
    width: 240px;
    height: 240px;
}
.imgbox img{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    outline: 1px solid #000;
}

说明：imgbox为放置图片的容器，高度和宽度可以设置为任意需要的大小，容器中的图片为绝对定位，使用top-bottom-left-right-margin使其居中。使用max-width和max-height使图片比容器大时也能正常显示。

方法二：

.imgbox{
    font-size: 0;
    width: 240px;
    height: 240px;
    line-height: 240px;
    text-align: center;
}
.imgbox img{
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    outline: 1px solid #000;
}

说明：对容器设置font-size：0，消除img下多出的3px，防止居中出现偏差。outline可有可无，我是为了清晰显示图片位置才声明的outline。

效果图：（最后两个图片width/height大于容器，均能正常显示）

案例代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style type="text/css" media="screen">

		li{
			list-style: none;
			float: left;
		}
		.imgbox{
		    position: relative;
		    width: 100px;
		    height: 100px;
		    border: 1px solid gray;
		    margin: 5px;
		    border-radius: 3px;
		}
		.imgbox img{
		    position: absolute;
		    top: 0;
		    bottom: 0;
		    left: 0;
		    right: 0;
		    margin: auto;
		    max-width: 100%;
		    max-height: 100%;
		    outline: 1px solid #000;
		}
	</style>
</head>
<body>
	<ul>
	    <li class="imgbox"><img src="img/house.jpg"></li>
	    <li class="imgbox"><img src="img/img_layer.jpeg"></li>
	    <li class="imgbox"><img src="img/house.jpg"></li>
	    <li class="imgbox"><img src="img/img_layer.jpeg"></li>
	    <li class="imgbox"><img src="img/house.jpg"></li>
	    <li class="imgbox"><img src="img/img_layer.jpeg"></li>
	    <li class="imgbox"><img src="img/house.jpg"></li>
	    <li class="imgbox"><img src="img/img_layer.jpeg"></li>
	    <li class="imgbox"><img src="img/house.jpg"></li>
	    <li class="imgbox"><img src="img/img_layer.jpeg"></li>
	    <li class="imgbox"><img src="img/house.jpg"></li>
	    <li class="imgbox"><img src="img/img_layer.jpeg"></li>
	    
	</ul>
</body>
</html>

效果图如下：