前言
由于移動網際網路的飛速發展
現在基本沒有哪個前端說自己隻開發 PC 端
移動端什麼的我不管
甚至好多前端主要的工作内容就是開發移動端，因為移動端的内容五花八門：微信小程式、支付寶小程式、京東小程式、快應用、微信公衆平台、微信小遊戲、混合App、H5等…
打開招聘軟體，可以看到目前的崗位對前端的要求是越來越高了，上天入地無所不能，螢幕前的你也可以打開軟體看一眼要求，是不是至少都有類似這麼幾條中的一兩個：熟練掌握移動端前端技術、有微信小程式開發經驗優先、有混合App開發經驗優先，即使不是那種專門做移動端網站的公司，有不少也都寫着會移動端優先…
是以移動端的布局就至關重要了，因為無論一個網站的頁面背後有着多麼複雜的互動邏輯、多龐大的使用者量、多麼海量的資料、多麼高的并發…
它終究還是得有個頁面吧！不能讓使用者一通路網站就直接給人家看資料庫吧！
有人的地方就有江湖
有頁面的地方就有布局
布局可不僅僅隻是把資料整齊的羅列在頁面上這麼簡單，一個合适的布局可以令使用者的操作非常順暢
同時在不同的場景下也應選擇不同的布局，如果選錯布局的話很可能會導緻使用者對頁面的操作不那麼的絲滑
哪怕最初呈現出來的資料都是一樣的
由于移動端的螢幕并不像電腦螢幕那麼大，而且長寬比也有很大的差別，是以造就了移動端布局與 PC 端布局有着很大的不同，那麼接下來我們就來看一下各式各樣的常見布局。
居中布局
其實居中布局大家在日常生活中基本都見過
隻是當時沒怎麼留意罷了
沒給使用者留下深刻印象的布局反而是好布局，因為使用者的注意力都在内容上了，證明此時的布局令使用者操作順暢。 而給使用者留下印象的布局一般就不太好了(一些與衆不同的炫酷布局除外)：
這個按鈕怎麼放這了，我都誤碰好幾次了；關閉按鈕在哪呢？怎麼關啊這個；這個商品的簡介在哪呢？應該點哪購買啊？這個布局怎麼這麼亂看的我都暈了，哎算了算了，以後不來這個網站了……
不同的布局用來對應不同的場景，用對場景的話會令使用者的操作比較舒服順暢，但用錯場景的話使用者可能會有些懵，不利于引導使用者按自己想要的方式去操作。
這種布局是主内容處于頁面的正中央位置，常見于登入、注冊、提示使用者、或點選頭像檢視大圖等場景，通常會添加一層灰色的透明遮罩：
這麼做的目的除了突出主題之外，還有一個比較重要的點就是可以令使用者感覺到自己并沒有離開目前頁面，隻不過是在目前頁面中出現了一個小框而已，這樣可以有效減少使用者的陌生感。
不僅如此，居中布局還能夠有效引導使用者進行自己希望使用者所進行的操作，用強烈的對比感去引導使用者：
利用CSS庫實作
借助市面上已有的 CSS 庫，我們可以很輕易的做到居中布局，尤其是可以用到中文關鍵字，這非常有利于我們的記憶，它就是: chinese-layout
運作結果:
絕對定位實作
居中布局通常分為兩種
一種是固定寬高
另一種是非固定寬高
固定寬高很好了解，顧名思義就是寬高都寫死。
而非固定寬高通常都是靠裡面的内容來撐起盒子的高度，内容時多時少。
這兩種方式也造就了不一樣的技術實作，絕對定位法适合固定寬高：
1
運作結果:
如果不給定寬高，盒子将會和父元素一樣大，因為絕對定位上下左右都是 0，意為緊貼着父元素的邊。
給了固定寬高，但沒寫 margin 的話盒子會固定在左上角，因為 top 和 left 的優先級更高。
給了 margin: auto; 的話，浏覽器會自動填充邊距，令其居中。
此種實作方式優點是相容性很好，幾乎沒用到任何 CSS 的新特性，全部都是經典屬性。
絕對定位 + 負邊距 此種方法也是适用于固定寬高:
1
運作結果:
⚠️ 注意，"絕對定位+負邊距"這種方法不适合那種寬百分之多少、高百分之多少這種相對機關，取而代之的是具體的數值。
因為邊距的百分比和寬高的百分比相對的不是同一參考系，它是相對于父元素的寬來計算的，這點要注意。
絕對定位 + 平移
有時中間盒子的内容是要靠背景傳過來的資料決定的，如果寫死的話，當資料較多時就會發生溢出，資料較少時又會空出一大片，是以我們需要一種更加智能的方式來實作居中布局。
絕對定位 + 平移 是 絕對定位 + 負邊距 的改進版，那麼具體都改進了哪些方面呢？
負邊距的百分比并不是相對于自身，而是相對于父元素，是以隻能寫具體的像素值，顯得不夠智能。
而平移相對于自身，隻需要無腦寫 -50% 就可以了:
1
運作結果:
margin 的百分比是相對于父元素的寬 而 translate 函數的百分比是相對于自身 不僅适用于未知寬高，也同樣适用于固定寬高的居中布局
網格 Grid 實作
大家可能或多或少聽過一些 Grid 的大名，深入了解過的人會覺得它很強大，但沒深入了解過的人對它的印象可能就是：相容性不好。
但随着時間的推移，在移動端隻要不考慮特别低版本的手機的話基本上都可以用了。
即使你對 Grid 沒什麼興趣，覺得在移動端用 Flex 就已經足夠了的話，把它最簡單的用法記住了也不會費太大勁。因為畢竟如果你能給面試官寫出一個最新的技術，面試官也會對你刮目相看的：
1
運作結果:
其實關鍵代碼異常的簡單，幾乎沒什麼特别大的學習成本，就這麼兩行：
Flex 彈性盒子 移動端布局王者當屬 Flex 莫屬
1
運作結果:
表格布局在居中布局這種場景下，表格布局也很适用：
1
運作結果:
此布局的關鍵點在于:
父元素上 3 個樣式設定：
display: table-cell;
text-align: center;
vertical-align: center;
子元素上設定：
display: inline-block;
Jie結Yu語
看完這些有沒有很郁悶，一個小小的居中布局都這麼多種實作方式，而且這還不是全部的實作方式，我隻挑了幾款市面上常見的，可能大家會覺得有這個必要記這麼多嘛！ 其實這個問題就顯得仁者見仁智者見智了，一方面面試造火箭，工作擰螺絲的現狀讓大家很苦惱。明明覺得自己技術還不錯，至少公司要的都能給實作出來，但面試的時候面對面試官的刁難自己卻無能為力。
也許下一次面試時并不會遇到一個面試官讓你以各種方式實作居中布局，但開拓一下眼界總是好的，因為變換一下思路有助于大家在遇見複雜布局的時候可以快速選型。
對了，這篇文章是連載形式的，居中布局僅僅隻是一個開始，點選在看，讓我們下個布局見！