这篇文章上次修改于 2083 天前，可能其部分内容已经发生变化，如有疑问可询问作者。
   
   <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>