圖片在DIV中居中

第一種

<style>
.content{
    display: inline-block;
    vertical-align: middle;
    }
.flag{
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
}
</style>
<div class="title">
    <div class="flag"></div>
    <div class="content">
        <img src="img.png">
    </div>
</div> 

第二種

<style>
.title{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
<div class="title">
      <img src="img.png">
</div>

第三種

<style>
.title {
   height: 15%;
   font-size: 18px;
   position: relative;
}
.title span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
<div class="title">
    <span><img src="img.png"></span>
</div>

第四種

<style>
.title {
    width: 200px;
    height: 200px;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}
</style>
<div class="title">
    <span><img src="img.png"></span>
</div>