佈局是CSS中一個重要部分，本文總結了CSS佈局中的經常使用技巧，包括經常使用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的盒模型佈局和比較新的flex佈局實現），但願能給須要的小夥伴帶來一些幫助。瀏覽器
文章目錄：
1.經常使用居中方法：水平居中，垂直居中，
2.單列布局
3.二列&三列布局：float+margin，position+margin，聖盃佈局（float+負margin），雙飛翼佈局（float+負margin），flex佈局
1.經常使用居中方法
居中在佈局中很常見，咱們假設DOM文檔結構以下，子元素要在父元素中居中：
ide
水平居中
子元素爲行內元素仍是塊狀元素，寬度必定仍是寬度未定，採起的佈局方案不一樣。下面進行分析：
行內元素：對父元素設置text-align:center;
定寬塊狀元素: 設置左右margin值爲auto;
不定寬塊狀元素: 設置子元素爲display:inline,而後在父元素上設置text-align:center;
通用方案: flex佈局，對父元素設置display:flex;justify-content:center;
垂直居中
垂直居中對於子元素是單行內聯文本、多行內聯文本以及塊狀元素採用的方案是不一樣的。
父元素必定，子元素爲單行內聯文本：設置父元素的height等於行高line-height
父元素必定，子元素爲多行內聯文本：設置父元素的display:table-cell或inline-block，再設置vertical-align:middle;
塊狀元素:設置子元素position:fixed（absolute），而後設置margin:auto;
通用方案: flex佈局，給父元素設置{display:flex; align-items:center;}。
2.單列布局
特徵：定寬、水平居中
佈局
常見的單列布局有兩種：
一種是header、content、footer寬度都相同，其通常不會佔滿瀏覽器的最寬寬度，但當瀏覽器寬度縮小低於其最大寬度時，寬度會自適應。
一種是header、footer寬度爲瀏覽器寬度，但content以及header和footer裏的內容卻不會佔滿瀏覽器寬度。
對於第一種，對header、content、footer統一設置width或max-width，並經過margin:auto實現居中。
DOM文檔:
flex
CSS清單:文檔
對於第二種，header、footer的內容寬度爲100%，但header、footer的內容區以及content統一設置max-width，並經過margin:auto實現居中。
DOM文檔:
it
CSS清單:io
- 二列&三列布局
二列布局的特徵是側欄固定寬度，主欄自適應寬度。三列布局的特徵是兩側兩列固定寬度，中間列自適應寬度。
之因此將二列布局和三列布局寫在一塊兒，是由於二列布局能夠看作去掉一個側欄的三列布局，其佈局的思想有殊途同歸之妙。對於傳統的實現方法，主要討論上圖中前三種佈局，經典的帶有側欄的二欄佈局以及帶有左右側欄的三欄佈局，對於flex佈局，實現了上圖的五種佈局。
a. float+margin
原理說明：設置兩個側欄分別向左向右浮動，中間列經過外邊距給兩個側欄騰出空間，中間列的寬度根據瀏覽器窗口自適應。
DOM文檔:
table
佈局步驟:
對兩邊側欄分別設置寬度，並對左側欄添加左浮動，對右側欄添加有浮動。
對主面板設置左右外邊距，margin-left的值爲左側欄的寬度，margin-right的值爲右側欄的寬度。
CSS清單:
class