CSS水平垂直居中的居中方法水平垂直居中是常见的需求之一。如果不考虑浏览器的兼容性，简单快捷的方法是直接上flex布局，

水平垂直居中是常见的需求之一。如果不考虑浏览器的兼容性，简单快捷的方法是直接上flex布局，其他方式，可以作为项目之外的知识补充。

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  <title></title>
  <style>
    .wrap {
      width: 500px;
      height: 500px;
      background-color: antiquewhite;
    }
    .wrap .box {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="box">
    </div>
  </div>
</body>
</html>

初始代码和效果如上所示，在这里主要以宽高已知的div为例，宽高已知，一定程度上，CSS居中的方法就是个伪命题了，不少情况是宽高未知，这种情况，文章末尾有说明。

方法一

利用flex布局，父元素设置 display: flex; justify-content: center; align-items: center; 分别从主轴和侧轴进行居中，分为老版本和新版本。

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8>
  <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  <title></title>
  <style>
    .wrap {
      width: 500px;
      height: 500px;
      background-color: antiquewhite;
      /* ① */
      display: flex;
      justify-content: center;
      align-items: center;     
      /* display: -webkit-box;
      -webkit-box-pack: center;
      -webkit-box-align: center; */
    }
    .wrap .box {
      width: 200px;
      height: 200px;
      background-color: pink;  
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="box">
    </div>
  </div>
</body>
</html>

方法二

父元素开启相对定位（ position: relative;），子元素开启绝对定位（position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; ）需要注意的是：通过设置top，left，bottom，right四属性为0居中元素的做法有个前置条件，就是需要居中的盒子必须有固定的宽高(px)，否则会失效。这就像四个方向有相同的力在拉这个盒子，配上margin:auto让这个盒子的位置保持中立，来达到盒子处于正中心的目的。

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8>
  <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  <title></title>
  <style>
    .wrap {
      width: 500px;
      height: 500px;
      background-color: antiquewhite; 
      position: relative;
    }
    .wrap .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      position: absolute; 
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;  
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="box">
    </div>
  </div>
</body>
</html>

方法三

父元素开启相对定位（ position: relative;），子元素开启绝对定位并利用transform（position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ），需要注意的是transform是CSS3属性

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8>
  <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  <title></title>
  <style>
    .wrap {
      width: 500px;
      height: 500px;
      background-color: antiquewhite;
      position: relative;
    }
    .wrap .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="box">
    </div>
  </div>
</body>
</html>

实现后的效果：

在实际开发中，如果已知宽高，可以使用方法二，当然也直接通过margin，就可以使元素水平垂直居中。但是设置margin也有设置margin的艺术，如下所示。

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8>
  <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  <title></title>
  <style>
    .wrap {
      width: 500px;
      height: 500px;
      background-color: antiquewhite;
      overflow: hidden;
      /*留个问题：为什么要设overflow: hidden;？*/
    }
    .wrap .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: calc(50% - 100px) calc(50% - 100px);
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="box">
    </div>
  </div>
</body>
</html>

但其实，有很多情况是没有明确宽和高的，可以采用方法一和方法三，个人建议，直接方法一，简单粗暴，但是有其他要求，就另说了。