图片在一个DIV中要垂直水平居中,首先定义一个DIV
.wrap{ width: 600px;
height: 400px;
border: 1px #000 solid;
}
插入图片
<div class="wrap">
<img src="../img/img2.png" alt="">
</div>
水平居中 在图片的父元素中用text-algin:center;进行水平居中
.wrap{ width: 600px;
height: 400px;
border: 1px #000 solid;
text-algin:center
}
垂直居中
1.在图片前或者后定义一个span元素,给span添加声明width:0;height:100%;display:inline-block;
2.给span转换成inline-block类型,并添加vertical-algin:middle中线对齐
3.g给图片img添加添加vertical-algin:middle中线对齐
/*图片前面定义一个span标签*/
<span></span><img src="../img/img2.png" alt="">
/*span居中*/
.wrap span{
width: 0px;
height: 100%;
display: inline-block;
vertical-align: middle;
}
/*图片居中*/
.wrap img{
vertical-align: middle;
}