方法一：vertical-align: middle;
先设置一个div包含一个a标签和img标签
<div> <a href="https://www.jianshu.com/u/2f326b555fe5"></a> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image404.png" alt=""></div>
让div在页面居中，此处用了用绝对定位position:absolute为了解决浏览器兼容问题，比如safari里面就会出现边缘间距空白
<style type="text/css">
div{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
text-align:center;
} div img{
border:0; width:700px;
}</style>此处div加上一个vertical-align:middle能让图片垂直居中，结果一点效果也没有。但是加上text-align:center的话，可以让里面的img水平居中，但vertical-align却不能这样子用。
我的第一种做法是：可以在div里面加一个span空标签，把它的高度设为100%，再给它一个vertical-align:middle样式，同样地给img一个vertical-align:middle样式，那么img就可以在div里面垂直居中了。
<head>
<meta charset="UTF-8">
<title>换肤效果</title>
<style>
*{ margin: 0; padding: 0;
} div{ width: 100%; height: 100px; background: yellow; text-align: center; vertical-align: middle;
} div img{ height: 80px; vertical-align: middle;
} body{ background: url("images/hanguo1.jpg");
} div span{ vertical-align: middle; display: inline-block; height: 100px;
} </style></head><body>
<div>
<span></span>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/gufen1.jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/gufen4_400x400.jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/gufen5.jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/gufen3.jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/gufen2.jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/hanguo2.jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/hanguo3.jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/纯阳.png" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/hanguo4.jpg" alt="">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/苍云.png" alt="">
</div></body>这里我设置页面背景为图片平铺效果，效果如下：
图片.png
方法二：vertical-align：middle
vertical-align属性只对行内元素有效，对块内元素无效！将display属性设置为table-cell，将块元素转化为单元格，然后加上vertical-align：middle，也可以实现这样的效果。
方法三：line-height
设置行高line-height,但是要注意，与父元素的高度一致，要与div的高度一致，但是小图片会被拉伸，大图片设置行高不会使的图片变小，大图片设置img的高度即可。
方法四：子绝父相
未知宽高的图片可以这样写，但是下面代码只能设置单张图片，多张图片还可以做变动，比如通过浮动来定位其他图片等
div{ width: 100%; height: 100px; background: yellow; position: relative;
}div img{ height: 80px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto;
}已知图片宽高的：通过计算可以获得，可以设置多张图片
div{ width: 500px; height: 500px; background: yellow; position: relative;
} div img{ width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left:-100px; margin-top: -100px;
}还有其他的方式，这里仅仅是用了css的一些方法
作者：Left左
链接：https://www.jianshu.com/p/90cf14afb5d5
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦