如何使圖片在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; }