元素的絕對居中應該是很多人熟悉的一個小應用，我記得很多年前去神州數碼面試的時候就遇到過這個面試題。方法比較簡單，代碼如下：
.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; /* 有了這個就自動居中了 */ }
有點神奇