CSS布局问题

1.居中布局：

水平居中：子元素于父元素水平居中且其（子元素与父元素）宽度均可变。

inline-block+text-align

     
Demo
 

兼容性佳（甚至可以兼容 IE 6 和 IE 7）

---

table+margin

 
  
Demo

display: table在表现上类似 block 元素，但是宽度为内容宽。支持 IE 8 及其以上版本。

---

absolute + transform

 
  
Demo

transform为 CSS3 属性，有兼容性问题

---

flex + justify-content

 
Demo

有兼容性问题

---

2.垂直居中

子元素于父元素垂直居中且其（子元素与父元素）高度均可变。

table-cell + vertical-align

 
  
Demo

兼容性好（支持 IE 8，以下版本需要调整页面结构至 table）

---

absolute + transform

 
  
Demo

flex + align-items

 
  
Demo

有兼容性问题

---

3.水平垂直居中

子元素于父元素垂直及水平居中且其（子元素与父元素）高度宽度均可变。

inline-block + text-align + table-cell + vertical-align

 
  
Demo

兼容性好

---

absolute + transform

 
  
Demo

---

flex + justify-content + align-items

 
  
Demo

有兼容性问题

---

4.多列布局

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

一列定宽，一列自适应

float + margin

 
  
 
    
left
 
  
 
  

     
right
     
right
 
  

NOTE：IE 6 中会有3像素的 BUG，解决方法可以在 .left加入 margin-left:-3px。

---

float + margin + (fix) 改造版

 
  
 
    
left
 
  
 
  

     

       
right
 
       
right
 
     
 
  

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

---

float + overflow

 
  
 
    
left
  
 
 
    
right
 
    
right
 

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

• 不支持 IE 6

---