老規矩，先來一段廢話，我大學剛入門的時候覺得CSS很簡單，記一記就會了，不就是盒模型嘛，現在想來覺得自己那時候真的很自以為是哈哈。但是隨着工作沉淀，我明白了任何技術都有着它的深度和廣度，正是因為不少人對CSS都抱有輕視的態度，不說精通，能把CSS學到位的人都少之又少。當然我這么說並不代表我的CSS如何了得，事實上，我也是個切圖仔，對CSS知之甚少。
回歸正題：
元素居中的方法有很多比如display：flex、絕對定位結合transform: translate(-50%, -50%)等等，但我覺得最神奇的還是：
<body> <div class="content"></div> </body>
.content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100px; height: 100px; margin: auto; background: green; }
之前我只知道這樣也能居中，但是不知道為什么。甚至還覺得主要是因為上下左右都為0的原因。
原因：
其實主要是因為：margin: auto;
auto的意思其實就是：平分剩余空間
（你看這個盒子模型它又長又寬，啊，串台了）
根據這個盒子模型我們可以看出，上下的margin都是一樣的，左右也一樣，也就是上、下平分、左、右平分。
那如果我們把上下左右的值設置都設置為100px並且把margin：auto; 去掉呢？
那它就以top、left的值來定位了，即使我把right、bottom寫在了前面。也就是當left、top、right、bottom都有值時，優先以左上角來定位。
這時可見剩余空間並沒有被平分。
在上右下左值不為0時加上margin: auto;也一樣居中了。可見，auto屬性確實在平分剩余空間。
順便再提一句，給父元素設置z-index:9999； 子元素仍然排在父元素上面，那是為什么呢？層疊上下文跟z-index的關系是如何的？以后有機會再說吧