<style>
        .wrap{ height: 300px; background: yellow; position: 
   relative; }
        .box{ width: 100px; height: 100px; background: red;}
        .wrap1 .box{
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -50px 0 0 -50px;
        }
        .wrap2{ background: #e5e5e5;}
        .wrap2 .box{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .wrap3 .box{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);/*位移*/
        }
    </style>
   </head>
  <body>
   <div class="wrap wrap1">
    <div class="box"></div>
  </div>
   <div class="wrap wrap2">
    <div class="box"></div>
  </div>
   <div class="wrap wrap3">
    <div class="box"></div>
   ![2019-03-12_231624.jpg][1]</div>