图片水平垂直居中对齐的四种做法

Posted 2020-10-24 mhxy13867806343

在前端开发制作中，图片垂直居中对齐是很常见的，有些是固定高度，有些没有固定高度，本文分享我用的四种方法，希望对你有所启发。

来源：http://caibaojian.com/img-vertical-middle.html

以下说的做法暂不考虑IE浏览器的兼容性，适用于移动端，对兼容性感兴趣的可以看之前的文章：图片垂直居中对齐的3种方法

以下的做法中假定外层的高度和宽度已经固定。通用HTML和CSS代码：

<div class="img">
<img src="http://dummyimage.com/200x200/f66/"/>
</div>

　　

1 .img {
2     width:300px;
3     height:300px;
4     margin:20px auto;
5     background:#00f;
6 }

1.相对定位+margin:auto

利用图片相对于外层浮动，加上margin:auto.

<div class="img img1">
<img src="http://dummyimage.com/200x200/f66/"/>
</div>

　　

 1 img1 {
 2     position:relative;
 3 }
 4 .img1 img {
 5     position:absolute;
 6     top:0;
 7     bottom:0;
 8     left:0;
 9     right:0;
10     margin:auto;
11 }

演示

2.flexbox

利用flexbox里面的垂直居中属性：align-items:center(垂直居中)和justify-content:center(水平居中);

<div class="img img2">
	<img src="http://dummyimage.com/200x200/f66/"/>
</div>

　　

 1 .img2 {
 2     display:-webkit-box;
 3     display:-ms-flexbox;
 4     display:flex-box;
 5     display:flex;
 6     -webkit-box-align:center;
 7     -ms-flex-align:center;
 8     align-items:center;
 9     -webkit-box-pack:center;
10     -ms-flex-pack:center;
11     justify-content:center;
12     text-align:center;
13 }

View Code

演示

3.table-cell

利用display:table-cell+图片vertical-align:middle

<div class="img img3">
	<span class="icenter"><img src="http://dummyimage.com/200x200/f66/"/></span>
</div>

　　

 1 .img3 .icenter {
 2     display:table-cell;
 3     vertical-align:middle;
 4     text-align:center;
 5     height:300px;
 6     width:300px
 7 }
 8 .img3 img {
 9     vertical-align:middle;
10     display:inline-block
11 }

演示

4.增加一个空白标签

兼容性较好，支持IE浏览器

<div class="img img4">
	<img src="http://dummyimage.com/200x200/f66/"/>
	<i class="iblock"></i>
</div>

　　

 1 .img4 {
 2     text-align:center
 3 }
 4 .img4 img {
 5     vertical-align:middle
 6 }
 7 .img4 .iblock {
 8     display:inline-block;
 9     height:100%;
10     width:0;
11     vertical-align:middle
12 }

演示