div居中方法是什么（让一个图片在div中居中4种方法）

第一种方法： div class =title div class =flag / div div class =content img src =img_p1_title.png / div / div .title { width: 100%; font-size: 0; height: 10%;}.title .content img { width: 35%;}/*--主要的-- */ .content{ display: inli

第一种方法：

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

.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;  }    

第二种方法：

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

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

第三种方法：

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

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

第四种方法：

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

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

***:红色部分就是主要代码

种方法 不支持 红色 代码 方法