絕對定位下的居中對齊

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。