居中布局簡介

1. 前言

接下來我們將帶領大家看看移動端常見的居中布局，其實居中布局大家在日常生活中基本都見過，只是當時沒怎么留意罷了。

沒給用戶留下深刻印象的布局反而是好布局，因為用戶的注意力都在內容上了，證明此時的布局令用戶操作順暢。

而給用戶留下印象的布局一般就不太好了（一些與眾不同的炫酷布局除外）：

這個按鈕怎么放這了，我都誤碰好幾次了；關閉按鈕在哪呢？怎么關啊這個；這個商品的簡介在哪呢？應該點哪購買??？這個布局怎么這么亂看的我都暈了，哎算了算了，以后不來這個網站了……

不同的布局用來對應不同的場景，用對場景的話會令用戶的操作比較舒服順暢，但用錯場景的話用戶可能會有些懵，不利于引導用戶按自己想要的方式去操作。

2. 效果展示

這種布局是主內容處于頁面的正中央位置，常見于登錄、注冊、提示用戶、或點擊頭像查看大圖等場景：

除了上圖那樣為了美觀而添加的白色透明遮罩，還有一種是為了突出主題，添加的是一層灰色的透明遮罩：

圖片來源 微博

這么做的目的除了突出主題之外，還有一個比較重要的點就是可以令用戶感覺到自己并沒有離開當前頁面，只不過是在當前頁面中出現了一個小框而已，這樣可以有效減少用戶的陌生感。

圖片來源 慕課網@imooc 不僅如此，居中布局還能夠有效引導用戶進行自己希望用戶所進行的操作，用強烈的對比感去引導用戶：

圖片來源 慕課網@imooc

3. 實現手段

一方面我們可以利用現有的CSS中文庫：chinese-layout 來快速實現居中布局：

• 中文布局 CSS 庫

這種方式不僅利于我們的學習，更加有助于我們的記憶。

然后也會帶領大家如何在不依賴于任何外界條件的情況下純手工實現居中布局：

• 絕對定位法
• 絕對定位 + 負邊距
• 絕對定位 + 平移
• 網格布局
• 彈性布局
• 表格布局

4. 小結

本小節我們為大家展示了居中布局的樣子以及它經常出現的一些場景，可以看到各大網站幾乎都會用到居中布局，而且看起來也似乎有種似曾相識的感覺。

居中布局在移動端擁有十分廣泛的應用，不過大多起的是一種引導或提示作用。
下一小節我們將講解一下如何用代碼去實現居中布局。