CSS布局问题

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在表现上类似 block 元素，但是宽度为内容宽。支持 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; }
   /* 或者下面的方法，可以达到一样的效果 */
  .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，以下版本需要调整页面结构至 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.多列布局

多列布局在网页中非常常见（例如两列布局），多列布局可以是两列定宽，一列自适应， 或者多列不定宽一列自适应还有等分布局等。

一列定宽，一列自适应

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 中会有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：此方法不会存在 IE 6 中3像素的 BUG，但 .left不可选择， 需要设置 .left {position: relative}来提高层级。 此方法可以适用于多版本浏览器（包括 IE6）。缺点是多余的 HTML 文本结构。

---

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>

设置 overflow: hidden会触发 BFC 模式（Block Formatting Context）块级格式化文本。 BFC 中的内容与外界的元素是隔离的。

• 不支持 IE 6

---