不同大小的图片在固定大小的容器中居中的css样式如何写？
发表：紫石头原创模板堂 发表时间：2019-11-14 09:36:31 阅读：89次
HTML示例如下：
<ul>
<li class="imgbox"><img src="img1.jpg"></li>
<li class="imgbox"><img src="img2.jpg"></li>
<li class="imgbox"><img src="img3.jpg"></li>
<li class="imgbox"><img src="img4.jpg"></li>
<li class="imgbox"><img src="img5.jpg"></li>
<li class="imgbox"><img src="img6.jpg"></li>
<li class="imgbox"><img src="img7.png"></li>
</ul>
方法一：
.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大于容器，也能正常显示）
十六年网站建设相关经验
一站式为您提供网站相关服务
欢迎扫码咨询
