Div中img图片水平垂直居中的方法（主要是垂直居中）

Div中img图片水平垂直居中的方法（主要是垂直居中）

写在前面：虽然问题很小但是经常用到，给自己和他人方便查看使用,哪里写错了，望见谅，同时评论告诉我下。

<div class="parent">
	<img src="....." alt="我是子"/>
</div>

方法_1:flex(测试可用)

父元素（parent）设置：

.parent{
	display:flex;
	justify-content: center;
	align-items: center;
}
.parent img{
width:40px;
}

方法_2:vertical-align

为行内元素，line-height设置的是块级元素，vertical-align针对的的是行内元素和单元格

.parent{
display：table；
}
.parent img{
display:table-cell;
text-align:center;
vertical-align:middle;
}

方法_3:position

定位思路，和让子div在父div居中思路是一样的

.parent{
display：relative;
}

//如果图片长宽已知
.parent img{
width:40px;
height:40px;
position:absolute;
left:50%;
top:50%;
/*此时图片左上角位于div的中心*/
margin-left:-20px;(-(1/2*width))
margin-top:-20px;(-(1/2*height))
/*取一半图片长高 给个负值*/
}

//如果图片长宽未知
.parent img{
position：absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

–end–