參考：
父元素：
position: relative;
居中元素：
position: absolute;top: 50%; //基於父元素
left: 50%; //基於父元素
transform: translate(-50%, -50%); //基於自身
注意：此方法可能會導致畫素模糊問題，因為css 的 transform： translate 屬性在作元素位移時，極有可能發生畫素點無法對齊的情況。正常情況下，元素的邊緣應該和畫素點對齊，但是經過 css translate 後，計算的結果並非整數的畫素點，導致本來乙個畫素能渲染的內容，沒有完全歸納在其畫素點內，如css transform:translate(-50%,-50%) 計算後的結果很可能是 transform: translate( 100.5px, 100.5px)，就因為 0.5 所以模糊。
解決方法：
1. 在 transfrom 時，使用 calc 函式 加上0.5 px （減0.5px也可）
transform: translate(calc(-50% + 0.5 px), calc(-50% + 0.5 px));
2. 使用flex
利用translate 進行水平垂直居中
translate 函式是css3的新特性.在不知道自身寬高的情況下，可以利用它來進行水平垂直居中.如下 html wrap 我不知道寬高，但是我就是要水平垂直居中 css wrap 效果如下 與負margin left和margin top實現居中不同的是，margin left必須知道自身的寬高...
CSS3 變形 位移 translate
變形 位移 translate translate 函式可以將元素向指定的方向移動，類似於position中的relative。或以簡單的理解為，使用translate 函式，可以把元素從原來的位置移動，而不影響在x y軸上的任何web元件。translate我們分為三種情況 1 translate...
css3 translate 完美詮釋表頭固定
效果如下 感覺是不是很和諧，而且 也少，不足的是ie9以下不支援transform屬性，但現在也沒多少要考濾ie9以下的相容了吧，做前端老兼顧低版本的瀏覽器難免會讓自己束手束腳。下面來看下 吧 html結構 123 4567 891011 1213 1415 css樣式 js指令碼 可惡的是ie不支...