css设置水平垂直居中和为什么可以这样

利用css设置水平垂直居中的几种方法

代码内容摘抄自asyncnode的 css中的多种垂直水平居中

不讨论关于display:flex这种设置元素水平垂直居中的情况

/**已知宽高*/
<style>
.container {
  width: 500px;
  height: 500px;
  position: relative;
  border: 1px solid #000;
}
.box {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  background-color: red;
}
</style>
<div class="container">
  <div class="box"></div>
</div>

设置负margin做到居中

.box {
  margin-top: -50px;
  margin-left: -50px;
}

设置calc

.box {
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}

为什么可以做到水平垂直居中

在css中，定位元素（绝对定位，相对定位）的起始点都是以自身的左上角开始的，所以，当你设置了left和top都是50%的时候，也就是相当于找到了父元素的水平垂直的点，然后设置自身的负一半就是为了让自身的水平垂直居中的点和父元素的点重合，这样就做到了水平垂直居中。
其实在未知宽高时，利用transform的translate(-50%, -50%)也是可以说什上面一样，因为translate是获取自身的宽高然后进行移动的。
附上自己画的一张丑图

无标题.png
附上大佬的解释

left和top都是相对于父元素的左上角，如果这个元素都设置50%的话，他本身的宽高你也要计算在内啊，所以要往回移动本身元素的-50%

还有一些其他的水平垂直居中方法，可以去看我再上面附上的链接，这里就不写了