1、水平居中
方法一：margin:0 auto；
是最常見的水平居中解決方案睦擂，但有其局限性：塊級(jí)元素，已知寬度杖玲，父級(jí)元素有寬度
方法二：text-align + inline-block
在父級(jí)元素上設(shè)置text-align：center;將需要居中的元素設(shè)置為inline-block（或inline）
方法三：position絕對(duì)定位
對(duì)于需要居中的元素：
position:absolute;(同時(shí)設(shè)置父級(jí)元素relative)
left:50%;(包括了元素本身的寬度)
transform:translateX(-50%);
局限性：CSS3屬性兼容性不好
方法四：flex彈性布局之justify-content
作用于父級(jí)元素
#parent{
display:flex;
justify-content:center;`
}
2顿仇、垂直居中
方法一：height +line-height
對(duì)于一個(gè)需要居中的 行內(nèi)（塊）元素 ，設(shè)置父元素的高度與行高相等摆马，即可實(shí)現(xiàn)垂直居中
方法二：table-cell + vertical-align
.parent{
display:table-cell;
vertical-align:middle
}
方法三：absolute+transform
類似于水平居中
方法四：flex+align-items
類似于水平居中
.parent{
display:flex;
align-items:center;
}
3臼闻、左邊固定右邊自適應(yīng)
HTML
<div class="left"></div>
<div class="right"></div>
CSS
.left{
float:left;
width: 200px;
height:400px;
background-color: blue;
}
.right{
height:400px;
background-color: red;
margin-left:210px;
}
4、右邊固定左邊自適應(yīng)
方法與 情況三 類似今膊，但有一點(diǎn)需要注意：無論是哪種情況些阅，再html結(jié)構(gòu)中，都要把浮動(dòng)塊寫在前面斑唬，否則浮動(dòng)塊會(huì)被擠到下一行。
HTML
<div class="right"></div>
<div class="left"></div>
CSS
.left{
height:400px;
background-color: red;
margin-right:210px;
}
.right{
float:right;
width: 200px;
height:400px;
background-color: blue;
}
5黎泣、兩邊固定中間自適應(yīng)
類似于兩欄布局恕刘，同樣是浮動(dòng)欄先渲染：
HTML:
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
CSS:
.left{
float:left;
width: 200px;
height:400px;
background-color: red;
}
.right{
float:right;
width:200px;
height:400px;
background-color: blue;
}
.middle{
height: 400px;
background-color: yellow;
margin:0 210px 0 210px;
}
但在實(shí)際情況下，中間欄才是主要內(nèi)容抒倚，需要優(yōu)先渲染褐着，也就是說，DOM結(jié)構(gòu)中托呕，中間欄需要寫在最前面含蓉，但是上文中提到過频敛，浮動(dòng)塊必須寫在最前面；解決方案是：三欄全浮動(dòng)馅扣。
有以下兩種經(jīng)典的布局方式斟赚，它們的共同點(diǎn)是：固比固布局，中間欄放到文檔流前面差油，保證先行渲染拗军。
實(shí)現(xiàn)方式是：三欄全部float:left浮動(dòng)。
區(qū)別在于解決中間欄div的內(nèi)容不被遮擋上：圣杯布局是在父級(jí)添加左右padding蓄喇，將三欄全部擠到中間发侵，然后在兩側(cè)邊欄添加相對(duì)定位，配合left和right屬性妆偏，將它們挪向兩邊刃鳄，為中間內(nèi)容騰出位置；而雙飛翼布局是在中間欄的div中嵌套一個(gè)div钱骂，內(nèi)容寫在嵌套的div里叔锐，對(duì)嵌套的div設(shè)置margin-left和margin-right。
5.1 圣杯布局
HTML:
<div class="container">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
.container{
overflow:hidden;
padding:0 200px;
}
.middle{
width:100%;
height:400px;
float:left;
background-color: yellow;
}
.left{
width:200px;
height:400px;
float:left;
background-color: blue;
margin-left:-100%;（擠上去）
position:relative;
left:-200px;
}
.right{
width:200px;
height:400px;
float:left;
background-color: darkseagreen;
margin-left:-200px;（擠上去）
position:relative;
right:-200px;
}
/*
解決遮擋的代碼是：
.container中 padding:0 200px;
.left中 position:relative;left:-200px;
.right中 position:relative;right:-200px;
*/
5.2 雙飛翼布局
HTML:
<div class="container">
<div class="middle">
<div id="inside">middle</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
.container{
overflow:hidden;
}
.middle{
width:100%;
height:400px;
float:left;
background-color: yellow;
}
.left{
width:200px;
height:400px;
float:left;
background-color: blue;
margin-left:-100%;（擠上去）
}
.right{
width:200px;
height:400px;
float:left;
background-color: darkseagreen;
margin-left:-200px;（擠上去）
}
/*解決遮擋*/
#inside{
margin:0 210px;
height:400px;
background-color:red;
}
如圖：
清除浮動(dòng)
由于上述布局很多用到了浮動(dòng)罐柳，為了消除浮動(dòng)元素對(duì)于其它元素布局的影響掌腰，就必須清除浮動(dòng)。
浮動(dòng)會(huì)導(dǎo)致的問題：
1张吉、父級(jí)元素不能正常撐開
2齿梁、背景不能正常顯示
3、margin不能正確顯示
etc..
清除浮動(dòng)的部分方法：
1肮蛹、在浮動(dòng)元素的同級(jí)勺择，增加一個(gè)空元素，并給該空元素設(shè)置clear:both;
2伦忠、在父級(jí)元素上設(shè)置overflow:auto;zoom:1
3省核、在父級(jí)添加偽元素after:after{content:"";display:block;clear:both;}
最后一點(diǎn)
上文中提到的兩欄布局，都是優(yōu)先加載了浮動(dòng)欄昆码，若要內(nèi)容欄優(yōu)先气忠，可以參考雙飛翼布局和圣杯布局，實(shí)現(xiàn)方式是一樣的赋咽。
或者換一種思路：之前我們浮動(dòng)的是固定欄旧噪，現(xiàn)在可以浮動(dòng)自適應(yīng)欄，以左欄固定右欄自適應(yīng)為例：設(shè)置右欄100%脓匿，右浮動(dòng)淘钟；然后再寫左邊欄。
