1.居中布局：
水平居中：子元素于父元素水平居中且其（子元素與父元素）寬度均可變。
inline-block+text-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: inline-block;
*display: inline;
*zoom: 1;/**IE7中居中**/
}
.parent { text-align: center; }
</style>
兼容性佳（甚至可以兼容 IE 6 和 IE 7）
table+margin
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child { display: table; margin: 0 auto; }
</style>
display: table在表現(xiàn)上類(lèi)似 block 元素郑诺，但是寬度為內(nèi)容寬吁讨。支持 IE 8 及其以上版本揪利。
absolute + transform
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { position: relative; }
.child { position: absolute; left: 50%; transform: translateX(-50%); }
</style>
transform為 CSS3 屬性，有兼容性問(wèn)題
flex + justify-content
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { display: flex; justify-content: center; }
/* 或者下面的方法，可以達(dá)到一樣的效果 */
.parent { display: flex; }
.child { margin: 0 auto; }
</style>
有兼容性問(wèn)題
2.垂直居中
子元素于父元素垂直居中且其（子元素與父元素）高度均可變礼烈。
table-cell + vertical-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { display: table-cell; vertical-align: middle; }
</style>
兼容性好（支持 IE 8，以下版本需要調(diào)整頁(yè)面結(jié)構(gòu)至 table）
absolute + transform
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { position: relative; }
.child { position: absolute; top: 50%; transform: translateY(-50%); }
</style>
flex + align-items
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { display: flex; align-items: center; }
</style>
有兼容性問(wèn)題
3.水平垂直居中
子元素于父元素垂直及水平居中且其（子元素與父元素）高度寬度均可變婆跑。
inline-block + text-align + table-cell + vertical-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { text-align: center; display: table-cell; vertical-align: middle; }
.child { display: inline-block;}
</style>
兼容性好
absolute + transform
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { display: flex; justify-content: center; align-items: center; }
</style>
flex + justify-content + align-items
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent { display: flex; justify-content: center; align-items: center; }
</style>
有兼容性問(wèn)題
4.多列布局
多列布局在網(wǎng)頁(yè)中非常常見(jiàn)（例如兩列布局）此熬，多列布局可以是兩列定寬，一列自適應(yīng)滑进， 或者多列不定寬一列自適應(yīng)還有等分布局等犀忱。
一列定寬，一列自適應(yīng)
float + margin
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left { float: left; width: 100px; }
.right { margin-left: 100px /*間距可再加入 margin-left */ }
</style>
NOTE：IE 6 中會(huì)有3像素的 BUG扶关，解決方法可以在 .left加入 margin-left:-3px阴汇。
float + margin + (fix) 改造版
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right-fix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
<style>
.left { float: left; width: 100px; }
.right-fix { float: right; width: 100%; margin-left: -100px; }
.right { margin-left: 100px /*間距可再加入 margin-left */ }
</style>
NOTE：此方法不會(huì)存在 IE 6 中3像素的 BUG，但 .left不可選擇节槐， 需要設(shè)置 .left {position: relative}來(lái)提高層級(jí)搀庶。 此方法可以適用于多版本瀏覽器（包括 IE6）。缺點(diǎn)是多余的 HTML 文本結(jié)構(gòu)铜异。
float + overflow
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left { float: left; width: 100px; }
.right { overflow: hidden; }
</style>
設(shè)置 overflow: hidden會(huì)觸發(fā) BFC 模式（Block Formatting Context）塊級(jí)格式化文本哥倔。 BFC 中的內(nèi)容與外界的元素是隔離的。
- 不支持 IE 6
