2.在一个div元素中的居中显示

方法一、margin:auto法

css代码

 div{
      width: 300px;
      height: 300px;
      position: relative;
      border: 1px solid #465468;
 }
 img{
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
 }  

html代码

    <div>
        <img src="images/1.1.png" alt="图片">
    </div>

微信截图_20180330111357.png

方法二、负margin法

css代码

        div{
            width: 500px;
            height: 400px;
            border: 2px solid #379;
            position: relative;
        }
        img{
            width: 380px;
            height: 280px;
            display: block;
            background-color: #746;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -140px; /*height的一半*/
            margin-left: -190px; /*width的一半*/
        } 

html代码

    <div>
        <img src="images/1.1.png" alt="图片">
    </div>

微信截图_20180330112547.png

方法三、弹性盒子法

css代码

        div{
              width: 400px;
              height: 300px;
              border: 3px solid #546461;
              display: -webkit-flex;
              display: flex;
              -webkit-align-items: center;
              align-items: center;
              -webkit-justify-content: center;
              justify-content: center;
         }
         img{
            width: 200px;
            height: 200px;
            display: block;
         }

html代码

    <div>
        <img src="images/1.1.png" alt="图片">
    </div>

微信截图_20180330113743.png