1、已知寬高
上圖中我們想要對已知寬度的「服務範圍」進行左右居中定位，我們可以先選擇left或者right樣式，這裡我們選擇的是left，這裡的50%指的是這個盒子的最左側位於水平的百分之五十的地方，也就是中間位置，因為我們知道整體的寬度，所以我們可以直接採用在向左移動寬度的一半，也就是margin-left: -175px;如下圖，儲存重新整理之後就水平居中了。
2、未知寬高
上圖的滾動圓點我們就不知道他的長度和寬度，首先還是使它的最左側位於的百分之50（left:50%;），最主要的是下面的transform，translate是位移屬性。
1.translatex(x)：元素在水平方向中移動的距離的單位用px和百分比表示，當x出現正值的時候，表示元素在水平方向右有移動，當x為負值的時候，表示該元素向左移動
2.translatey(y)：x是在水平方向上移動，y是在垂直方向上移動，當
y出現正值的時候，說明該元素在向下移動，如果出現負值，說明是向上移動，和我們的正常思維相反。
3.translate(x,y)
通過這個，我們就可以讓其居中了
下圖就是垂直居中
ps：此外還有許多居中方式
1、多塊級元素水平居中
單行文字垂直居中
2、塊級元素水平居中
3、內聯元素水平居中
4、塊級元素水平居中
通過把固定寬度塊級元素的margin-left和margin-right設成auto，就可以使塊級元素水平居中
5、利用彈性布局（flex）
6、通過設定內聯元素的高度(height)和行高(line-height)相等，從而使元素垂直居中
水平垂直居中 已知寬高 未知寬高
水平 垂直居中的方法 已知寬高 未知寬高 一 居中元素 已知寬高 1 margin 根據已知的寬高寫死，不推薦 div1 div22 定位 margin top margin left.div1 div23 定位 margin.div1 div24 定位 transform 存在相容問題.div1 ...
CSS未知DOM寬高設定居中
常規的面試問 不知道寬高的情況下如何實現垂直居中，今天我們討論乙個比較複雜的場景，同樣是不知道寬高，而且 還要限制最大寬高邊界，比如頭像，要求上傳的頭像沒有最小寬高限制，但是有最大寬高限制，還要實現上下左右自適應居中，類似於img標籤的background屬性，當然如果你真的是img的話也可以使用 ...
寬高未知垂直水平居中
寬高未知情況下垂直水平居中很多情況下都會遇到 查了蠻多大家分享的小例子，我也來記錄一下 這裡是css3的 transform 屬性，可以在ie9及以上的瀏覽器水平垂直居中chrome firefox也是沒有問題 這裡是一段話這裡是一段話 這裡是一段話這裡是一段話 這裡是一段話這裡是一段話 total...