垂直水平居中是日常前端開發當中乙個常見的需求，在支援 css3 屬性的現代瀏覽器當中，有乙個利用 css3 屬性的垂直水平居中方法：
position absolute; :; :; :translate; :translate; :translate; :translate; }
例子傳送門（請用現代瀏覽器開啟）
從上面的例子看到，無論我們怎樣調整視窗的大小，紅色方塊始終會在視窗垂直、水平居中。
原理為了解釋原理，我們建立兩個元素:
divid"outer"> < =>
先不加上 屬性：
#outerposition relative; :; :; :; }
未加上 屬性的例子。
可以看到紅色方塊左、上方距離外層方塊的距離都是250個畫素，如果我們想實現垂直水平居中，就應該將紅色方塊的中心點移動到目前元素左上角的位置，也就是分別向上和向左移動一半方塊邊長的長度，50個畫素。
#innerposition absolute; :; :; :; :; :; :translate; :translate; :translate; :translate; }
加上 屬性。
所以我們可以看到在 函式當中使用百分比是以該元素的內容區、補白()、邊框()為標準計算的，為了說明這一點，我們在 innner 元素加上一些 和 :
#innerposition absolute; :; :; :; :; :; :; :; :translate; :translate; :translate; :translate; }
加上 和 以後。
可以看到 inner 元素一樣做到了垂直、水平居中。
translate 與絕對定位、相對定位
在表現上看，使用 css3 函式和絕對定位、相對定位屬性加上 、 數值都可以使元素產生位移。實際上它們還是有不少的區別。
元素檢視屬性中的 和 屬性。
我們分別用相對定位和 的方法來使元素產生位移：
#box1position relative; :; :; :; :; :; }
#box2width 50px; :; :; :translate; :translate; :translate; :translate; }
然後看看兩者的 和 的數值：
vardocument"box1"); alert(box1.offsetleft); alert(box1.offsettop);
vardocument"box1"); alert(box2.offsetleft); alert(box2.offsettop);
使用相對定位的例子
使用 translate 的例子
可以看出使用 的例子的 和 的數值與沒有產生位移的元素沒有然後區別，無論位移多少這兩個數值都是固定不變的。
而使用相對定位的例子 和 的數值則根據位移的長度發生了改變。
動畫表現的區別
在 css3 屬性還沒很好地被瀏覽器支援的時候，我們常常會使用絕對定位()，然後結合 jquery 改變元素的、 的數值來做位移的動畫效果。
然而，兩者在位移動畫的表現上也有一定的區別。借用國外博主 paul irish 的兩個例子：
animating with top/left
animating with translate
對比兩個例子來看，可以看出使用 來製作的動畫比絕對定位的動畫更加平滑。
原因在於使用絕對定位的動畫效果會受制於利用畫素(px)為單位進行位移，而使用 函式的動畫則可以不受畫素的影響，以更小的單位進行位移。
另外，絕對定位的動畫效果完全使用 cpu 進行計算，而使用 函式的動畫則是利用 gpu，因此在視覺上使用 函式的動畫可以有比絕對定位動畫有更高的幀數。
最後css3 動畫相關的屬性出現以後，可以讓我們更加輕鬆地製作複雜的動畫，同時 和 這一類的屬性可以回歸它們原本的定位，為定位、布局服務，而將動畫的重任交給 css3 的相關屬性。
translate與絕對定位 相對定位的區別
在表現上看，使用css3 translate函式和絕對定位 相對定位屬性加上top left數值都可以使元素產生位移。實際上它們還是有不少的區別。我們分別用相對定位和translate的方法來使元素產生位移 1.使用相對定位使元素產生位移 box12.使用translate使元素產生位移 box2然...
CSS之Position相對定位和絕對定位
absolute的英文意思是絕對的意思,實際上是針對父級元素元素定位,如果父級元素沒有position relative absolute,則追至再上乙個父級元素,直至相對於文件的左上角定位，按照我們中國人的理解觀念，這個其實是相對定位，是脫離文件流的。用了abolute屬性，原有float屬性將失...
絕對定位與相對定位
先看以下 效果 當設定child的div改為絕對定位後 效果 當父div沒設定絕對定位時，子絕對定位是相對於瀏覽器左上角座標，當時當父div設定了絕對或者相對定位後，效果如下 absolute 絕對定位 和 relative 相對定位 position absolute 意思是 絕對定位，他預設參照...