css图片 垂直居中办法
方法一 :
给img加上 vertical-align: middle; 属性
注意:
仅仅给img加上vertical-align: middle; 属性它不是真正的居中;
由于vertical-align属性的中线受字体大小的影响 ,所以要将父级的字体大小设置为0px;
//样式
<style>
*{
margin: 0;
padding:0;
}
div{
margin: 30px auto;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 0px;//字体大小要设置0px;
text-align: center;
background-color: red;
}
img{
max-width: 100%;//设置最大宽和最大高 是为了图片能够自己等比缩放,不至于变形
max-height: 100%;
vertical-align: middle;
}
</style>
//结构
<div>
<img src="2.png" alt="">
</div>
方法二:
给父级设置 display:table-cell; 和 vertical-align: middle;
注意:
单独的给一个元素添加table-cell属性时,为其添加margin值是无效的,
必须在它外层添加一个父级元素,设置属性为display:table;
*****这个方法同样可以应用于 多行文字垂直居中,非常便捷
//样式
<style>
*{
margin: 0;
padding:0;
}
//如果没有为 .box元素设置 table 属性,那么 table-cell的margin值是无效的!!
.box{
display: table;
}
div{
margin: 30px auto;
width: 100px;
height: 100px;
//下面两行样式 是重点
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: red;
}
img{
max-width: 100%;
max-height: 100%;
}
</style>
//结构
<div class="box">
<div>
<img src="" alt="">
</div>
</div>