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

//水平靠左
.alignleft {
    display: inline;
    float: left;
}
<img src="" class="alingleft">
 
//水平靠右
.alignright {
    display: inline;
    float: right;
}
<img src="" class="alignright">
 
//水平居中
.aligncenter {
    clear: both;
    display: block;
    margin: auto;
}
<img src="" class="aligncenter">

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

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

<div><img src=""></div>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 150px;
        height: 100px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border: 1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>

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

<div><img src=""></div>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 150px;
        height: 100px;
        position: relative;
        border: 1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -25px; // 高度的一半
        margin-left: -25px; // 宽度的一半
    }
</style>

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

<div><img src=""></div>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 150px;
        height: 100px;
        position: relative;
        border: 1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

弹性布局flex 

<div><img src=""></div>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 150px;
        height: 100px;
        border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>

设置父div为table-cell属性 

<div><img src=""></div>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    img {
        width: 100px;
        height: 100px;
        display: inline-block;
    }
</style>

无固定宽高 

<div><img src=""></div>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        height: 200px;
        margin: 0 auto;
        text-align: center;
        position: relative;
        border: 1px solid #000;
    }
    img {
        width: 100px;
        height: 100px;
        position: absolute;
        border: 1px solid #000;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform:translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
</style>

固定宽高

<div><img src=""></div>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 0 auto;
        text-align: center;
        position: relative;
    }
    img {
        width: 100px;
        height: 100px;
        position: absolute;
        border: 1px solid #000;
        left: 50%;
        top: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>

在div中添加span空元素

<div>
    <img src="">
    <span></span>
</div>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 0 auto;
        text-align: center;
    }
    img {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        display: inline-block;
        vertical-align: middle;
    }
    #box span{
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
</style>