摘自今日頭條用戶：代碼開發
原文鏈接：
https://www.toutiao.com/a6671145738690363917/?tt_from=mobile_qq&utm_campaign=client_share×tamp=1560782203&app=news_article&utm_source=mobile_qq&utm_medium=toutiao_android&req_id=2019061722364201002507914693856D5&group_id=6671145738690363917
居中布局
水平居中
子元素於父元素水平居中，子元素與父元素寬度均可變。
inline-block + text-align
優點
- 兼容性佳（甚至可以兼容 IE 6 和 IE 7）
table + margin
display: table 在表現上類似 block 元素，但是寬度為內容寬。
優點
- 無需設置父元素樣式 （支持 IE 8 及其以上版本）
absolute + transform
優點
- 絕對定位脫離文檔流，不會對后續元素的布局造成影響。
缺點
- transform 為 CSS3 屬性，有兼容性問題
flex + justify-content
優點
- 只需設置父節點屬性，無需設置子元素
缺點
- 有兼容性問題
垂直居中
子元素於父元素垂直居中且其（子元素與父元素）高度均可變。
table-cell + vertical-align
優點
- 兼容性好（支持 IE 8）
absolute + transform
優點
- 絕對定位脫離文檔流，不會對后續元素的布局造成影響。但如果絕對定位元素是唯一的元素則父元素也會失去高度（文中添加了300px,方便查看）。
缺點
- transform 為 CSS3 屬性，有兼容性問題
flex + align-items
優點
- 只需設置父節點屬性，無需設置子元素
缺點
- 有兼容性問題
水平與垂直 都居中
子元素於父元素垂直及水平居中且其（子元素與父元素）高度寬度均可變。
inline-block + text-align + table-cell + vertical-align
優點
- 兼容性好
absolute + transform
優點
- 絕對定位脫離文檔流，不會對后續元素的布局造成影響。
缺點
- transform 為 CSS3 屬性，有兼容性問題
flex + justify-content + align-items
優點
- 只需設置父節點屬性，無需設置子元素
缺點
- 有兼容性問題
多列布局
多列布局在網頁中非常常見（例如兩列布局），多列布局可以是兩列定寬，一列自適應， 或者多列不定寬一列自適應還有等分布局等。
一列定寬，一列自適應
float + margin
IE 6 中會有3像素的 BUG，解決方法可以在 .left 加入 margin-left:-3px。
float + margin + (fix) 改造版
此方法不會存在 IE 6 中3像素的 BUG，但 .left 不可選擇， 需要設置 .left {position: relative} 來提高層級。 此方法可以適用於多版本瀏覽器（包括 IE6）。缺點是多余的 HTML 文本結構。
float + overflow
設置 overflow: hidden 會觸發 BFC 模式（Block Formatting Context）塊級格式化文本。 BFC 中的內容與外界的元素是隔離的。
優點
- 樣式簡單
缺點
- 不支持 IE 6
table
table 的顯示特性為每列的單元格寬度合一定等與表格寬度。 table-layout: fixed; 可加速渲染，也是設定布局優先。
table-cell 中不可以設置 margin 但是可以通過 padding 來設置間距。
flex
flex-item 默認為內容寬度。
缺點
- 低版本瀏覽器兼容問題
- 性能問題，只適合小范圍布局。
兩列定寬，一列自適應
多列定寬的實現可以更具單列定寬的例子進行修改與實現。
一列不定寬加一列自適應
不定寬的寬度為內容決定，下面為可以實現此效果的方法：
- float + overflow，此方法在 IE6 中有兼容性問題
- table，此方法在 IE6 中有兼容性問題
- flex，此方法在 IE9及其以下版本中有兼容性問題
多列不定寬加一列自適應
其解決方案同一列不定寬加一列自適應相仿。
多列等分布局
每一列的寬度和間距均相等，下面為多列等分布局的布局特定。
父容器寬度為 C，C = W * N + G * N - G => C + G = (W + G) * N。
float
此方法可以完美兼容 IE8 以上版本。 NOTE+：此方法結構和樣式具有耦合性。
table
缺點是多了文本結果
flex
flex 的特性為分配剩余空間。 NOTE+：兼容性有問題。
table
table 的特性為每列等寬，每行等高可以用於解決此需求。
flex
flex 默認的 align-items 的值為 stretch。
float
此方法為偽等高（只有背景顯示高度相等），左右真實的高度其實不相等。 此方法兼容性較好。