前言
這是一篇基礎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
尾聲
再一次聲明，這篇文章主幹來自於互聯網（掘金：Sweet_KK）。我只是站著巨人的肩膀上重新運行了一遍~
閱讀更多 碼農登陸 的文章
