html图片自动居中div,让一个图片在div中居中（四种方法）

方法一

html：

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;

}

方法二

html：

<

css：

.title {

display: flex;

justify-content: center;

align-items: center;

}

.title img {

width: 35%;

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

方法三

html：

第三种方法

**css：**

.title {

height: 15%;

font-size: 18px;

position: relative;

}

.title span {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

方法四

html：

第四种方法

css：

.title {

width: 200px;

height: 200px;

vertical-align: middle;

display: table-cell;

text-align: center;

}