图片水平垂直居中的四种方法

第一种：相对定位+margin:auto

<div class="Pic"><img src="images/img.png" alt="” /></div>

.Pic { position:relative; }

.Pic img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; }

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

<div class="Pic”><img src="images/img.png" alt="" /></div>

.Pic { display:flex; align-items:center; justify-content: center; /*新版本写法*/ text-align:center; }

第三种：利用dispay:table-cell + 图片vertical-align:middle

<div class="Pic"><span class="icenter"><img src="images/img.png" alt="" /></span></div>

.Pic .icenter { display:table-cell; vertical-align:middle; text-align:center; width:60px; height:60px; }

.Pic img { vertical-align:middle; display:inline-block; }

第四种：增加一个空白标签

<div class="Pic"><img src="images/img.png" alt="" /><i class="iblock"></i></div>

.Pic { text-align:center; }

.Pic img { vertical-align:middle; }

.Pic .iblock { display:inline-block; vertical-align:middle; height:100%; width:0; }

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容