css3種方法實現元素的絕對居中

元素的絕對居中應該是不少人熟悉的一個小應用，我記得不少年前去神州數碼面試的時候就遇到過這個面試題。方法比較簡單，代碼以下：

.node{ width : 300px; height : 400px; position : absolute; left : 50%; top : 50%; margin-left : -150px; /*一半的高度*/ margin-top : -200px; /*一半的寬度*/ }

這樣的用法網上不少，我那時候也是隻知其然不知其因此然，margin負值是一方面，這裏要說的是left和top的百分比。

先看下w3c裏面對這個概念的介紹：

其實這裏也沒有清楚，這裏left和top的百分比，我以爲應該標尺應該是父元素，也就是分別是 left的50% 實際上是父元素寬度的50%,top值爲50%,也是父元素高度的50%,

而且這個值是能夠實時計算的，改變瀏覽器窗口的大小時，會發現元素始終居中，就是實時計算的結果。

瞭解了這一點就簡單了。

畫個圖說明一下：

（吐個槽：很久不用ps 畫個這麼簡單的圖都笨的不行了）

經過postion的定位，如今子元素被定到了黃色區域，這個時候，經過margin的負值，就能夠移到絕對居中的位置了

本想再畫個圖的，畫圖技能太差，這一點也比較好理解，就不畫了。

 

除了這種經常使用的居中方法外，還有一種css3的方法，也比較好理解，是當前方法的一個改進，不須要知道元素的寬和高。

.node { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 50%爲自身尺寸的一半 */ }

這個用法主要是用到css3中的transform,這裏就很少介紹了，可是在網上，看到了還有一種方式，用的是margin:auto;我以爲比較好玩。

.node { width: 600px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 有了這個就自動居中了 */ }

有點神奇