图片水平,垂直居中的几种办法

1.

        

< div class ="test" >

< div class ="flag" ></ div >

< div class ="content" >

< img src ="img_p1_title.png" >

</ div>

</ div >

.test{

   width: 100%;

    font-size: 0;  

    height: 10%;

}

.test .content img {

    width: 35%;

}

/*--主要的--*/

.content{

    display: inline-block;

    vertical-align: middle;

  }

.flag{

    display: inline-block;

    vertical-align: middle;

    height: 100%;

    width: 0;

  }

2.

<div class="test">

< img src ="img_p1_title.png" >

</ div >

.test{

  display: flex;

  justify-content: center;

  align-items: center;  

}

.test img {

  width: 35%;

}

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

3.

<div class="test">

< span > 第三种方法 </ span >

</ div >

. test{

   height: 15%;

   font-size: 18px;

   position: relative;

}

. test span {

    position: absolute;

    top: 50%;

    left: 50%;

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

}

4.

< div class ="test" >

< span >第四种方法 </ span > </ div >

.test{

    width: 200px;

    height: 200px;

    vertical-align: middle;

    display: table-cell;

    text-align: center;

}