如何使图片在div中居中

<p class="title">
 <p class="flag"></p>
 <p class="content">
 <img src="img_p1_title.png">
 </p>
 </p>

.title {
 width: 100%;
 font-size: 0; 
 height: 10%;
}
.title .content img {
 width: 35%;
}
/*--主要的--*/.content{
 display: inline-block;
 vertical-align: middle;
 }
.flag{
 display: inline-block;
 vertical-align: middle;
 height: 100%;
 width: 0;
 }

<p class="title">
<img src="img_p1_title.png">
</p>

.title { display: flex;
 justify-content: center;
 align-items: center; }
.title img {
 width: 35%;
}
//该方法有些旧系统不支持

<p class="title">
<span>第三种方法</span>
</p>

.title {
 height: 15%;
 font-size: 18px; position: relative;
}
.title span { 
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

<p class="title">
 <span>第四种方法</span>
</p>

.title {
 width: 200px;
 height: 200px; 
 vertical-align: middle;
 display: table-cell;
 text-align: center;
 }