前言

這是一篇基礎CSS佈局的內容，可能內容比較的簡單。但是很適合查缺補漏的閱讀。

這篇文章來自於網際網路（掘金：Sweet_KK）。我簡單的自己跑了一遍，添加了一些自己的看法，刪了一些個人感覺不重要的，重新排版了一下。

當然，如果原作者感覺不妥，私信就刪。

一、水平居中

1.1、文字/行內元素/行內塊級元素

tips：text-align只控制行內：文字、行內元素、行內塊級元素，相對於它的塊級父元素對齊。

#view{
 text-align: center;
}

只對行內內容有效；屬性會繼承影響到後代行內內容；如果子元素寬度大於父元素寬度則無效，只有後代行內內容中寬度小於設定text-align屬性的元素寬度的時候，才會水平居中。

1.2、單個塊級元素

tips：在margin有剩餘時，並且如果左右margin設定了auto，那麼將會均分剩餘空間。此外，如果上下的margin設定了auto，其計算值則為0。

#view{
 width: 666px; /*必須定寬*/
 margin: 0 auto;
}

必須固定寬度，且不能設定為auto；寬度要小於父元素，否則無效。

1.3、絕對定位

tips：

• 1、top、right、bottom、left的值是相對於父元素尺寸的
• 2、margin或者transform是相對於自身尺寸的
• 二者組合，達到水平居中的目的

使用margin-left需要先知道寬度；並且在IE9以下，使用transform相容性不好。

1.4、flex

#view{
 display: flex;
 justify-content: center;
}

PC端、移動端的相容性不好

總結

Sweet_KK原話總結：

對於水平居中，我們應該先考慮，哪些元素有自帶的居中效果，最先想到的應該就是 text-align:center 了，但是這個只對行內內容有效，所以我們要使用 text-align:center 就必須將子元素設定為 display: inline; 或者 display: inline-block; ；其次就是考慮能不能用margin: 0 auto; ，因為這都是一兩句程式碼能搞定的事，實在不行就是用絕對定位去實現了。

移動端能用flex就用flex，簡單方便，靈活並且功能強大，無愧為網頁佈局的一大利器！

二、垂直居中

2.1、單行文字/行內元素/行內塊級元素

tips：line-height的最終表現是通過inline box實現的，而無論inline box所佔據的高度是多少（無論比文字大還是比文字小），其佔據的空間都是與文字內容公用水平中垂線的。

#view{
 height: 150px;
 line-height: 150px; /*與height等值*/
}

只能用於單行行內內容；且需要先知道高度

2.2、多行文字/行內元素/行內塊級元素

tips：也可以選擇使用span把所有文字包裹起來，設定display：inline-block 用轉換成圖片的方式解決

#parent{ 
 height: 150px;
 //元素在頁面呈現為5行,則line-height的值為height/5
 line-height: 30px; 
}

只能用於單行行內內容；且需要先知道高度

2.3、圖片

#parent{
 height: 666px;
 line-height: 666px;
 font-size: 0;
}
img#son{vertical-align: middle;} /*預設是基線對齊，改為middle*/

需要新增font-size: 0; 才可以完全的垂直居中

2.4、單個塊級元素

設定tabl-cell的元素，寬度和高度的值設定百分比無效，需要給它的父元素設定display: table; 才生效。

table-cell不感知margin，在父元素上設定table-row等屬性，也會使其不感知height。

設定float或position會對預設佈局造成破壞，可以考慮為之增加一個父div定義float等屬性；內容溢位時會自動撐開父元素。

2.5、絕對定位

方法1

tips：子絕父相，top、right、bottom、left的值是相對於父元素尺寸的，然後margin或者transform是相對於自身尺寸的，組合使用達到水平居中的目的

使用margin-left需要先知道寬度；並且在IE9以下，使用transform相容性不好。

方法2

tips：當top、bottom為0時,margin-top&bottom會無限延伸佔滿空間並且平分

#parent{position: relative;}
#son{
 position: absolute;
 margin: auto 0;
 top: 0;
 bottom: 0;
 height: 50px;
}

2.6、flex

總結

Sweet_KK原話總結：

對於垂直居中，最先想到的應該就是 line-height 了，但是這個只能用於行內內容；

其次就是考慮能不能用vertical-align: middle; ，不過這個一定要熟知原理才能用得順手，建議看下vertical-align和line-height的基友關係 ；

然後便是絕對定位，雖然程式碼多了點，但是勝在適用於不同情況；

移動端相容性允許的情況下能用flex就用flex

最後，如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端群733581373，好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習

如果想看到更加系統的文章和學習方法經驗可以關注的微訊號：‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’可以領取一套完整的學習視訊