來自：張泰峰 - 博客園
連結：http://www.cnblogs.com/ztfjs/p/5250405.html
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .div2{ width:40px ; height: 40px; background-color: green;} </style> <div class="div1"> <div class="div2"> </div> </div> </body>
</html>
問題：如何讓class為div2的內部容器上下左右居中？
前來面試的朋友大多數回答都不那么正確，筆者在這裡給大家做一個詳細的介紹
1、我們可以使用margin來達到這個效果
.div2{ width:40px ; height: 40px; background-color: green; margin-top: 30px; margin-left: 30px;}
--我們需要將div2的margin-left、margin-top值設置為父容器寬度的二分之一 減去 自身寬度的二分之一 這裡的父容器是div1
它的寬度是100px ； div2的寬度是40px 由此得出 margin-top: 30px; margin-left: 30px; div2也就居中了； 效果如下圖
2、利用絕對定位 position：absolute 配合margin的auto屬性 來達到居中的效果 我們可以將css修改為
.div1{ width: 100px; height: 100px; border: 1px solid #000000; position: relative;}
.div2{ width:40px ; height: 40px; background-color: green; position: absolute; margin: auto; left: 0; top: 0; right: 0; bottom: 0;}
---將div2設置為相對div1的絕對定位，margin設為四邊auto left、top、bottom、right設為0 瀏覽器會對絕對定位的容器margin：auto自動識別，
最後得到類似於margin：0 auto的效果；
而我們也可以將left、top、bottom、right設為你想要的值 讓div2可以在div1中的任意位置，只是定位的原點被margin：auto移動在div2的左上角；例如：
.div2{ width:40px ; height: 40px; background-color: green; position: absolute; margin: auto; left: 0; top: -30px; right: 0; bottom: 0;}
此時div2的位置在垂直居中的-30px的地方；
總結：在我們的網頁中，經常會遇到這樣的需求 彈窗的居中，圖片的居中，很多童鞋採用js算法動態設置left、top ； 而這一步是沒有必要的；
非常感謝下面的博友的評論----
改了一下，這樣可以實現任意div2高度的,不用絕對定位。
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000; vertical-align:middle;display:table-cell;}
.div2{ width:40px ; margin:0 auto; }
</style>
<div id="div1" class="div1">
<div id="div2" class="div2">
這是一段文字 </div>
</div>
另外貼一個方法二更詳細的介紹
說明
在研究了規範和文檔後，我總結出了「完全居中」的工作原理：
在普通文檔流裡，margin: auto; 的意思是設置元素的margin-top和margin-bottom為0。
W3.org:?If 『margin-top』, or 『margin-bottom』 are 『auto』, their used value is 0.
2. 設置了position: absolute; 的元素會變成塊元素，並脫離普通文檔流。而文檔的其餘部分照常渲染，元素像是不在原來的位置一樣。 Developer.mozilla.org:?…an element that is positioned absolutely is taken out of the flow and thus takes up no space
3. 設置了top: 0; left: 0; bottom: 0; right: 0; 樣式的塊元素會讓瀏覽器為它包裹一層新的盒子，因此這個元素會填滿它相對父元素的內部空間，這個相對父元素可以是是body標籤，或者是一個設置了 position: relative; 樣式的容器。 Developer.mozilla.org:?For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).
4. 給元素設置了寬高以後，瀏覽器會阻止元素填滿所有的空間，根據margin: auto; 的要求，重新計算，並包裹一層新的盒子。 Developer.mozilla.org:?The margin of the [absolutely positioned] element is then positioned inside these offsets.
5. 既然塊元素是絕對定位的，又脫離了普通文檔流，因此瀏覽器在包裹盒子之前會給margin-top和margin-bottom設置一個相等的值。 W3.org:?If none of the three [top, bottom, height] are 『auto』: If both 『margin-top』 and 『margin-bottom』 are 『auto』, solve the equation under the extra constraint that the two margins get equal values.?AKA: center the block vertically
使用「完全居中」，有意遵照了標準margin: auto; 樣式渲染的規定，所以應當在與標準兼容的各種瀏覽器中起作用。
原文章地址：http://codepen.io/shshaw/full/gEiDt
●本文編號229，以後想閱讀這篇文章直接輸入229即可。
●輸入m可以獲取到文章目錄
《15個技術類公眾微信》
涵蓋：程序人生、算法與數據結構、黑客技術與網絡安全、大數據技術、前端開發、Java、Python、Web開發、安卓開發、iOS開發、C/C++、.NET、Linux、資料庫、運維等。
最近發現一個好玩的測試，網際網路從業者都應該來試下，我得了 95 分，看看你能不能超過我！長按圖片識別二維碼或者點擊閱讀原文就可以參與。