居中布局簡介

1. 前言

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

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

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

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

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

2. 效果展示

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

3. 實現(xiàn)手段

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

• 中文布局 CSS 庫

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

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

• 絕對定位法
• 絕對定位 + 負邊距
• 絕對定位 + 平移
• 網(wǎng)格布局
• 彈性布局
• 表格布局

4. 小結

本小節(jié)我們?yōu)榇蠹艺故玖司又胁季值臉幼右约八?jīng)常出現(xiàn)的一些場景，可以看到各大網(wǎng)站幾乎都會用到居中布局，而且看起來也似乎有種似曾相識的感覺。

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