绝对定位下的居中对齐

position:absolute

这是一个常用的定位方式，如果要在页面内放入一个弹出窗口，执行一些临时性的操作，就会使用这个定位。React.js的设计理念中就包含对这种方式的经常性使用，主要是因为React中页面尽可能不依靠大量操作Dom去生成新的内嵌元素，而是预先准备好，用display:none隐藏起来，需要的时候就修改display使其显示出来。比如需要点击页面上的一个缩略图，查看完整的大图，就可以预先定义一个预览框，设置较高的z-index，然后用display:none藏起来。继而在点击缩略图的时候， 只需要修改一下img标签的src（或者用背景图就是url），然后修改display，将其显示出来，从头到尾只需要做两处修改。
然而为了界面的美观，很多时候会需要进行居中对齐。偏偏用绝对定位（absolute）或者固定定位（fixed）的话，整个div块就对css的其他定位排版油盐不进，无论是margin：auto也好，还是流式布局的{display: flex; justify-content: center; align-item: center;}。最后迫于无奈，使用了transform，直接将其移动。
这里先给出排版方式

{position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);  }

具体原理是，先将div 的左上角定位到屏幕的正中间，然后将其左移自身1/2宽度，上移1/2高度，整个块正好对屏幕中轴对称。
需要注意的是，在position: fixed下，超出的部分是不会被显示的，因为不管如何滚动屏幕，它的定位都是跟着屏幕走。这时候要自己去根据实际情况做缩放（定义max-height或者max-width，通常比zoom更好），或者使用overflow: scroll | auto的方式。
对于一些固定的内容，这种居中方式相对兼容性较好，比如NavBar和 Footer。