Angular 5中如何居中#loading div？已尝试margin和定位无效

嗨，我来帮你搞定这个#loading div的居中问题！你遇到的情况很常见，咱们先拆解下为什么原来的方法没起作用，再给你几个靠谱的解决方案～

问题根源分析 #

• 你给#loading设置了position: absolute，但原来的margin: 0 auto之所以无效，是因为绝对定位元素要靠margin:auto实现居中，必须同时设置left: 0; right: 0（如果要垂直居中还得加top:0; bottom:0），否则浏览器没有足够的空间去计算自动边距。
• 而left:50%只是让元素的左边缘对齐父元素的中线，并没有把元素自身的中心拉到中线位置，所以看起来完全没居中；另外你没配合设置top:50%和对应的偏移，自然不会向下移动。

方案1：transform + left/top 50%（最灵活，推荐） #

这个方法不需要提前知道元素的宽高，非常适合动态内容的场景，也是现在最常用的居中方式：

#loading, #outlet {
  width: 100%;
  height: 100%;
  position: absolute;
}
#loading{
  z-index: 10;
  height: 100px;
  width: 200px;
  background-color: rgba(255,255,255,0.85);
  padding: 40px;
  border: 1px solid #d3d3d3;
  position: absolute;
  left: 50%;
  top: 50%;
  /* 关键：把元素向左向上偏移自身宽高的50%，让中心对齐父元素中线 */
  transform: translate(-50%, -50%);
}

原理：left:50%和top:50%让元素的左上角定位到父元素的中心，translate(-50%,-50%)再把元素往回挪自身宽高的一半，最终让元素的中心和父元素中心完全重合。

方案2：margin:auto + 上下左右0（适合固定宽高场景） #

如果你确定#loading的宽高不会变化，也可以用这种更传统的方式：

#loading, #outlet {
  width: 100%;
  height: 100%;
  position: absolute;
}
#loading{
  z-index: 10;
  height: 100px;
  width: 200px;
  background-color: rgba(255,255,255,0.85);
  padding: 40px;
  border: 1px solid #d3d3d3;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto; /* 浏览器会自动分配上下左右的边距，把元素挤到中心 */
}

原理：把绝对定位元素的上下左右都设为0，让它的可定位空间铺满整个父容器，再通过margin:auto让浏览器自动计算均等边距，实现居中。

另外补充：你设置的#outlet是100%宽高的绝对定位元素，会占满整个父容器，而#loading的z-index:10已经确保它在#outlet上方，这部分逻辑是没问题的。

内容的提问来源于stack exchange，提问作者user9536240