css中absolute設置問題和如何讓div居中

今天設置多個div到頁面正中間的時候，在第一層<div class="map">中設置如下：

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

該div就移到頁面的正中間，達到預定效果。借鑒：https://www.cnblogs.com/gxsweb/p/5395243.html

但是將該div的子元素div的position設置成absolute后，子元素的div的position是相對於父元素的div的。

原因是：

position:absolute是相對於他的包含塊中第一個有position:absolute或者position:relative屬性的父級元素，如果都沒有，就是相對於body。借鑒：https://www.cnblogs.com/zhglhtt/articles/3265372.html