translate()函式是css3的新特性.在不知道自身寬高的情況下，可以利用它來進行水平垂直居中.。
當使用：top: 50%;left: 50%;， 是以左上角為原點，故不處於中心位置
translate(-50%,-50%) 作用是，往上（x軸）,左（y軸）移動自身長寬的 50%，以使其居於中心位置。
與負margin-left和margin-top實現居中不同的是，margin-left必須知道自身的寬高，而translate可以在不知道寬高的情況下進行居中，tranlate（）函式中的百分比是相對於自身寬高的百分比，所以能進行居中。
```html
.content
前端垂直居中推薦方法
在寫web前端的時候,水平居中一般沒有任何爭議。有爭議的主要在垂直居中的處理上面。一般來說垂直居中有這樣的幾種辦法。body header companynamea style class header class companynamea href 公司名稱a div 未處理子元素間空隙示例 bo...
容器垂直居中的六中方法（前端開發基礎一）
div1 div2 divclass div1 divclass div2 div div 這是容器的基本結構，要達到的效果是使div2在div1中垂直居中。下面一共有六中方法 法一 已知div1和div2的寬高，通過手動計算，用一下方式 div2法二 外層div設定為相對定位，內層div設定絕對定...
前端水平居中以及垂直居中方法積累
1.1已知寬度塊元素寬度 child1.2文字內容居中 parent1.3通過 child1.4已知寬度,通過設定position absolute,margin left為寬度的負一半.parent child1.5未知寬度,通過設定position absolute.parent child1....