思路一：绝对定位方案

1. 常规操作：margin设置为负值

前提: div元素的宽高确定。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS垂直居中测试</title>
  <style>
    #center {
      width: 200px;
      height: 200px;
      background-color: red;
    }

    html, body, #container {
      width: 100%;
      height: 100%;
      background-color: black;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="center"></div>
  </div>
</body>

</html>

现在我们给 center 一个绝对定位，让它距离左侧边缘和顶部边缘分别 50%

#center {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
}

因为我们是相对父元素定位，这里别忘了给父元素设置一个 relative

#container {
  position: relative;
}

大家会发现直接绝对定位保持上下左右各 50% 的距离，并不能达到我们的目的。绝对定位的基准线是元素的左侧边缘和顶部边缘，而我们的居中所期望的却是元素的中心和容器边缘保持上下左右各 50% 的距离。因此我们就要对元素边缘和元素中心的这个距离进行处理。在这个场景下，元素的宽高都是已知的，因此我们直接设置负的 margin 值即可：

#center {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}

margin-left 设为负值，可以让元素相对于自己原有的位置向左移动相应的距离，margin-top 同理。通过我们这样的操作，元素就会相对于它原来的位置分别向左和向上移动自身宽/高的一半距离。如此，我们就可以弥补元素中心到元素左侧边缘和元素顶部边缘的差距了：

tiantingrui / daily-harvest

让一个元素进行垂直和水平居中的方法有哪些？ #14

思路一：绝对定位方案

1. 常规操作：margin设置为负值