实现DIV内img图片水平垂直居中的方法

如何实现DIV内的img图片水平垂直居中的方法？

• 方法一：运用flex

对父元素<div class="main">进行css样式设置：

{
display:flex;
justify-content: center;
align-items: center;
}

• 方法二：vertical-align
  <img>是行内元素，line-height设置的是块级元素，vertical-align针对的的是行内元素和单元格
  设置外层div的css样式：

{
display：table；
}

设置内层div的css样式：

{
display:table-cell;
text-align:center;
vertical-align:middle;
}

• 方法三：position
  设置外层div的css样式：

{
display：relative;
}

设置<img>的css样式：

1. 图片大小已知

{
width:100px;
height:200px;
position:absolute;
left:50%;
top:50%;
/*此时图片左上角位于div的中心*/
margin-left:-50px;(-1/2width)
margin-top:-100px;(-1/2height)
/*图片分别向左、向上移动图片一半宽、高的距离*/
}

2. 图片大小未知

{
position：absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);