图片水平垂直居中对齐的四种做法 April 26, 2019 在前端开发]制作中,图片对齐是很常见的,有些是固定高度,有些没有固定高度,本文分享我用的四种方法,希望对你有所启发。 以下说的做法暂不考虑IE浏览器的兼容性,适用于移动端。 以下的做法中假定外层的高度和宽度已经固定。通用HTML和CSS代码: ``` .img { width:300px; height:300px; margin:20px auto; background:#00f; } ``` ### 1.绝对定位+margin:auto 利用图片相对于外层浮动,加上margin:auto. ``` .img1 { position:relative; } .img1 img { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; } ``` [演示1](http://caibaojian.com/demo/2017/07/img1.html#demo1) ### 2.flexbox 利用flexbox里面的垂直居中属性:align-items:center(垂直居中)和justify-content:center(水平居中);[·](http://caibaojian.com/img-vertical-middle.html) ``` .img2 { display:-webkit-box; display:-ms-flexbox; display:flex-box; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; text-align:center; } ``` [演示2](http://caibaojian.com/demo/2017/07/img1.html#demo2) ### 3.table-cell 利用display:table-cell+图片vertical-align:middle ``` //code from http://caibaojian.com/img-vertical-middle.html .img3 .icenter { display:table-cell; vertical-align:middle; text-align:center; height:300px; width:300px } .img3 img { vertical-align:middle; display:inline-block } ``` [演示3](http://caibaojian.com/demo/2017/07/img1.html#demo3) ### 4.增加一个空白标签 兼容性较好,支持IE浏览器 ``` .img4 { text-align:center } .img4 img { vertical-align:middle } .img4 .iblock { display:inline-block; height:100%; width:0; vertical-align:middle } ``` > 原文链接:http://caibaojian.com/img-vertical-middle.html