水平居中布局
首先我們來看看水平居中
1.margin + 定寬
Demo.child{width:100px;margin:0auto;? }
相必是個(gè)前端都見過，這定寬的水平居中，我們還可以用下面這種來實(shí)現(xiàn)不定寬的
2. table + margin
Demo.child{display: table;margin:0auto;? }
display: table在表現(xiàn)上類似block元素，但是寬度為內(nèi)容寬。
無需設(shè)置父元素樣式 （支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要調(diào)整為
3.inline-block + text-align
Demo.child{display: inline-block;? }.parent{text-align: center;? }
兼容性佳（甚至可以兼容 IE 6 和 IE 7）
4. absolute + margin-left
Demo.parent{position: relative;? }.child{position: absolute;left:50%;width:100px;margin-left: -50px;/* width/2 */}
寬度固定
相比于使用transform，有兼容性更好
5. absolute + transform
Demo.parent{position: relative;? }.child{position: absolute;left:50%;transform:translateX(-50%);? }
絕對(duì)定位脫離文檔流，不會(huì)對(duì)后續(xù)元素的布局造成影響。
transform為 CSS3 屬性，有兼容性問題
6. flex + justify-content
Demo.parent{display: flex;justify-content: center;? }
只需設(shè)置父節(jié)點(diǎn)屬性，無需設(shè)置子元素
flex有兼容性問題
垂直居中
1.table-cell + vertical-align
Demo.parent{display: table-cell;vertical-align: middle;? }
兼容性好(IE 8以下版本需要調(diào)整頁(yè)面結(jié)構(gòu)至table)
2.absolute + transform
強(qiáng)大的absolute對(duì)于這種小問題當(dāng)然也是很簡(jiǎn)單的
Demo.parent{position: relative;? }.child{position: absolute;top:50%;transform:translateY(-50%);? }
絕對(duì)定位脫離文檔流，不會(huì)對(duì)后續(xù)元素的布局造成影響。但如果絕對(duì)定位元素是唯一的元素則父元素也會(huì)失去高度。
transform為 CSS3 屬性，有兼容性問題
同水平居中，這也可以用margin-top實(shí)現(xiàn)，原理水平居中
3.flex + align-items
如果說absolute強(qiáng)大，那flex只是笑笑，因?yàn)?，他才是最?qiáng)的。。。但它有兼容問題
Demo.parent{display: flex;align-items: center;? }
水平垂直居中
1. absolute + transform
Demo.parent{position: relative;? }.child{position: absolute;left:50%;top:50%;transform:translate(-50%, -50%);? }
絕對(duì)定位脫離文檔流，不會(huì)對(duì)后續(xù)元素的布局造成影響。
transform為 CSS3 屬性，有兼容性問題
2. inline-block + text-align + table-cell + vertical-align
Demo.parent{text-align: center;display: table-cell;vertical-align: middle;? }.child{display: inline-block;? }
兼容性好
3. flex + justify-content + align-items
Demo.parent{display: flex;justify-content: center;/* 水平居中 */align-items: center;/*垂直居中*/}
只需設(shè)置父節(jié)點(diǎn)屬性，無需設(shè)置子元素
蛋疼的兼容性問題
##一列定寬，一列自適應(yīng)
1.float + margin
left
right
right
.left{float: left;width:100px;? }.right{margin-left:100px/*間距可再加入 margin-left */}
IE 6 中會(huì)有3像素的 BUG，解決方法可以在.left加入margin-left:-3px當(dāng)然也有解決這個(gè)小bug的方案如下：
left
right
right
.left{float: left;width:100px;? }.right-fix{float: right;width:100%;margin-left: -100px;? }.right{margin-left:100px/*間距可再加入 margin-left */}
此方法不會(huì)存在 IE 6 中3像素的 BUG，但.left不可選擇， 需要設(shè)置.left {position: relative}來提高層級(jí)。 注意此方法增加了不必要的 HTML 文本結(jié)構(gòu)。
2.float + overflow
left
right
right
.left{float: left;width:100px;? }.right{overflow: hidden;? }
設(shè)置overflow: hidden會(huì)觸發(fā) BFC 模式（Block Formatting Context）塊級(jí)格式上下文。BFC是什么呢。用通俗的來講就是，隨便你在BFC 里面干啥，外面都不會(huì)受到影響 。此方法樣式簡(jiǎn)單但不支持 IE 6
3 .table
left
right
right
.parent{display: table;width:100%;table-layout: fixed;? }.left{display: table-cell;width:100px;? }.right{display: table-cell;/*寬度為剩余寬度*/}
table的顯示特性為每列的單元格寬度和一定等與表格寬度。table-layout: fixed可加速渲染，也是設(shè)定布局優(yōu)先。table-cell中不可以設(shè)置margin但是可以通過padding來設(shè)置間距
4. flex
left
right
right
.parent{display: flex;? }.left{width:100px;margin-left:20px;? }.right{flex:1;? }
低版本瀏覽器兼容問題
性能問題，只適合小范圍布局
我們?cè)趯W(xué)會(huì)一列定寬，一列自適應(yīng)的布局后也可以方便的實(shí)現(xiàn)多列定寬，一列自適應(yīng)多列不定寬加一列自適應(yīng)這里我們不一一講解，大家自行嘗試，也可以鞏固前面學(xué)習(xí)的
等分布局
1. float
1
2
3
4
.parent{margin-left: -20px;? }.column{float: left;width:25%;padding-left:20px;box-sizing: border-box;? }
此方法可以完美兼容 IE8 以上版本
2. flex
1
2
3
4
.parent{display: flex;? }.column{flex:1;? }.column+.column{/* 相鄰兄弟選擇器 */margin-left:20px;? }
強(qiáng)大簡(jiǎn)單，有兼容問題
3. table
1
2
3
4
.parent-fix{margin-left: -20px;? }.parent{display: table;width:100%;/*可以布局優(yōu)先，也可以單元格寬度平分在沒有設(shè)置的情況下*/table-layout: fixed;? }.column{display: table-cell;padding-left:20px;? }
等高布局
1.table
table的特性為每列等寬，每行等高可以用于解決此需求
left
right
right
.parent{display: table;width:100%;table-layout: fixed;? }.left{display: table-cell;width:100px;? }.right{display: table-cell/*寬度為剩余寬度*/}
2.flex
left
right
right
.parent{display: flex;? }.left{width:100px;margin-left:20px;? }.right{flex:1;? }
注意這里實(shí)際上使用了align-items: stretch，flex 默認(rèn)的align-items的值為stretch
3. float
left
right
right
.parent{overflow: hidden;? }.left,.right{padding-bottom:9999px;margin-bottom: -9999px;? }.left{float: left;width:100px;margin-right:20px;? }.right{overflow: hidden;? }
此方法為偽等高（只有背景顯示高度相等），左右真實(shí)的高度其實(shí)不相等。兼容性較好。
到此，我們了解常見的布局解決方案，這些只是參考，一樣的布局實(shí)現(xiàn)方式多種多樣。主要就使用position、flex、table（從很久很久以前起，我們就拋棄了table布局頁(yè)面，但display: table;是異常強(qiáng)大）、float等屬性目前flex兼容性較差傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器
