translate居中

  <!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <meta name="Author" content="胡超">
  <title>super胡</title>
  <style type="text/css">
  html,body,div {margin: 0;padding: 0}
  .box {
  position: relative;
  margin: 20px auto;
  200px;
  height: 200px;
  background: #ddf;
  }
  .content {
  position: absolute;
  top:50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  padding: 10px;
  100px;
  height: 80px;
  background: #abc;
  text-align:center;
  line-height:80px;
  }
  </style>
  </head>
  <body>
  <div class="box">
  <div class="content">
  This is test
  </div>
  </div>
  </body>
  </html>
原文地址:https://www.cnblogs.com/12606huchao/p/4883536.html