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

第一种：

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

css:

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

css:

.title {
    display: flex;
    justify-content: center;
    align-items: center;
}
.title img {
    width: 35%;
}

// 该方法有些旧系统不支持

 

-----------------------------------------------------------------------------------------

第三种：

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

 

css:

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

-----------------------------------------------------------------------------------------

第四种：

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

css:

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