居中布局簡(jiǎn)介

1. 前言

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

沒給用戶留下深刻印象的布局反而是好布局，因?yàn)橛脩舻淖⒁饬Χ荚趦?nèi)容上了，證明此時(shí)的布局令用戶操作順暢。

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

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

不同的布局用來對(duì)應(yīng)不同的場(chǎng)景，用對(duì)場(chǎng)景的話會(huì)令用戶的操作比較舒服順暢，但用錯(cuò)場(chǎng)景的話用戶可能會(huì)有些懵，不利于引導(dǎo)用戶按自己想要的方式去操作。

2. 效果展示

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

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

圖片來源 微博

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

圖片來源 慕課網(wǎng)@imooc 不僅如此，居中布局還能夠有效引導(dǎo)用戶進(jìn)行自己希望用戶所進(jìn)行的操作，用強(qiáng)烈的對(duì)比感去引導(dǎo)用戶：

圖片來源 慕課網(wǎng)@imooc

3. 實(shí)現(xiàn)手段

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

• 中文布局 CSS 庫

這種方式不僅利于我們的學(xué)習(xí)，更加有助于我們的記憶。

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

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

4. 小結(jié)

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

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