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)上類似 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 屬性，有兼容性問題

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>

有兼容性問題

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)整頁面結(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>

有兼容性問題

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>

有兼容性問題

4.多列布局

多列布局在網(wǎng)頁中非常常見（例如兩列布局），多列布局可以是兩列定寬，一列自適應(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}來提高層級(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