img标签的水平居中、靠左、靠右

//水平靠左
.alignleft {
    display: inline;
    float: left;
}


//水平靠右
.alignright {
    display: inline;
    float: right;
}


//水平居中
.aligncenter {
    clear: both;
    display: block;
    margin: auto;
}

div里的img标签实现水平垂直居中 

将display设置成table-cell，水平居中设置text-align为center，垂直居中设置vertical-align为middle

通过position定位实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%,此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半。 

用于不清楚图片或元素的真实宽高情况：通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半，如果不知道元素的宽高，可以用transform: translate(-50%,-50%);

弹性布局flex 

设置父div为table-cell属性 

无固定宽高 

固定宽高 

在div中添加span空元素