記錄下 CSS 常用佈局的解決方案，對於需要高兼容性的佈局可以使用基於 posistion 屬性的佈局，table 佈局方式也經常用到。還有基於margin 和 float 的傳統佈局方式、利用 BFC 的佈局方式和 CSS3 的彈性佈局 flex 的佈局方式。具體選用哪一種可以依據實際業務加以變通和修改。

前端設計，CSS 常用佈局解決方案

1、水平居中佈局

inline-block + text-align

優點：兼容性好；缺點：子容器的內容居中需要額外的 text-align 屬性；

inline-block + text-align

table + margin

優點：兼容性好，只用關心子元素的樣式屬性；解釋：display:table 屬性使得元素具有同 inline-block 一樣的特性，容器大小取決於內容大小，並且具有寬高；

table + margin

absoulte + transform (relative + relative)

缺點：兼容性問題；(relative + relative) => 父元素設置 relative 向右平移 50%， 子元素設置 relative 向左平移 -50%，relative 均是相對於自身寬度進行移動；

absoulte + transform (relative + relative)

flex + justify-content

優點：只需要對父容器進行設置；缺點：兼容性問題；

flex + justify-content

2、垂直居中佈局

table-cell + vertical-align

優點：兼容性好；解釋：vertical-align 可以作用於 inline、inline-block、table-cell 元素上；

table-cell + vertical-align

absolute + transform

缺點：兼容性問題；

absolute + transform

flex + align-items

缺點：兼容性問題；

flex + align-items

3、一列定寬，一列自適應（其他類似的類型都可以由此衍生）

float + margin

優點：兼容性較好；

優點：兼容性較好；

float + margin + (fix) 解決IE6下的3像素問題

優點：兼容性較好；解釋：防止子元素清除浮動帶來的問題，使用 position:relative; 來提高元素層級；

float + margin + (fix) 解決IE6下的3像素問題

float + overflow

缺點：兼容性問題；解釋：利用 BFC 模式使自適應部分不受 float 的影響；

float + overflow

table

缺點：代碼量較多；解釋：display:table; 默認大小為內容大小；display:table-cell 不能設置 margin 屬性；table-layout:fixed; 可以加速渲染，佈局優先，固定表格佈局中，水平佈局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。自動錶格佈局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的。；

table

flex

缺點：性能一般；解釋：flex 一般用於小範圍佈局，防止出現性能問題；

flex

4、多列等分佈局

float

優點：耦合性交大；解釋：使用 box-sizing:border-box; 讓瀏覽器以 IE 的怪異模式解析“盒模型”，即元素尺寸為 “content + padding + border” 三者的和；

float

table

優點：結構跟樣式解耦；

table

flex

缺點：兼容性問題；

flex