闲来无事,被人问到如何使img在一个div中垂直居中显示,自己就总结了如下几种方法,供大家参考:
方法一:在box中添加span空元素
<div id="box"><div class="img"></div><span></span></div>
#box{width: 200px;height: 200px;background:black;margin:0 auto;text-align: center;}.img{width: 100px;height: 100px;background:white;display: inline-block;vertical-align: middle;}#box span{display: inline-block;width:0;height:100%;vertical-align: middle;}
方法二:使用定位法,使用定位法时,img包含两种情况:
(1)固定宽高
<div id="box"><div class="img"></div></div>
#box{width: 200px;height: 200px;background:black;margin:0 auto;text-align: center;position: relative;}.img{width: 100px;height: 100px;position: absolute;background: white;left:50%;top:50%;margin-top:-50px;margin-left:-50px;}
(2)无固定宽高
<div id="box"><div class="img"></div></div>
#box{width: 200px;height: 200px;background:black;margin:0 auto;text-align: center;position: relative;}.img{width: 100px;height: 100px;position: absolute;background: white;left:50%;top:50%;-webkit-transform: translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
方法三:设置父div为table-cell属性
<div id="box"><div class="img"></div></div>
#box{width: 200px;height: 200px;background:black;display: table-cell;text-align: center;vertical-align: middle;}.img{width: 100px;height:100px;background: white;display: inline-block;}
方法四:使用flex布局
<div id="box"><div class="img"></div></div>
#box{width: 200px;height: 200px;background:black;text-align: center;display: flex;justify-content: center;align-items: center;margin:0 auto;}.img{width: 100px;height:100px;background: white;}
前两种是在开发中用的比较多的,最后一种在移动端布局使经常使用,只限子元素只有一个元素的情况下,以上为本人的见解,如有错误还请大家指正!