How to make a picture centered in a div

The first method:

<p class= "title" >        <p class= "flag" ></p>        <p class= "Content" >                    </p>    </p>

. title {   width:100%;    font-size:0;      height:10%;}. Title. Content img {    width:35%;} /*--the main--*/.content{    Display:inline-block;    Vertical-align:middle;  }. flag{    Display:inline-block;    Vertical-align:middle;    height:100%;    width:0;  }

The second method:

<p class= "title" ></p>

. title {  Display:flex;  Justify-content:center;   }.title img {  width:35%;}
This method is not supported by some legacy systems

The third method:

<p class= "title" ><span> Third method </span></p>

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

The fourth method:

<p class= "title" > <span> Fourth Method </span></p>

. title {    width:200px;    height:200px;        Vertical-align:middle;    Display:table-cell;    Text-align:center; }