做前端這一年多來，其實一直都是偏向於js前後端，css什麼的總是抱著夠用就好的心態，從來沒有系統的學習或總結過，結果現在的水平也一直停留在夠用的階段。感覺作為一名合格的前端工程師，不能讓css成為自己的短板，於是簡單的總結一下，高手繞路。我們在實際工作中常會遇到需要設定水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。
這裡我們又得分兩種情況：行內元素 還是 塊狀元素 ，塊狀元素裡面又分為定寬塊狀元素，以及不定寬塊狀元素。
如果被設定元素為文字、等行內元素時，水平居中是通過給父元素設定text-align:center來實現的。
當被設定元素為 塊狀元素 時用text-align：center就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
定寬塊狀元素
滿足定寬和塊狀兩個條件的元素是可以通過設定「左右margin」值為「auto」來實現居中的。如：
div在實際工作中我們會遇到需要為「不定寬度的塊狀元素」設定居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來限制它的彈性。
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
1. 加入table標籤包裹或使用disable:table-cell
為什麼選擇方法一加入table標籤? 是利用table標籤的長度自適應性---即不定義其長度也不預設父元素body的長度（table其長度根據其內文字長度決定），因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
2. 設定display: inline方法
改變塊級元素的 display 為 inline 型別（設定為 行內元素 顯示），然後使用 text-align:center 來實現居中效果。
與第一種類似，顯示型別設為行內元素，進行不定寬元素的屬性設定。
3. 使用left:50%配合transform: translatex(-50%)
這個就好說啦，子元素相對父元素向右偏移父元素的50%，然後在相對於自身向左偏移自身的50%,完事。
我們在實際工作中也會遇到需要設定垂直居中的場景，比如好多報紙的文章標題在左右一側時，常常會設定為垂直居中，為了使用者體驗性好。
這裡我們又得分兩種情況：父元素高度確定的單行文字，以及父元素高度確定的多行文字。
父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的height和line-height高度一致來實現的。(height:該元素的高度，line-height:顧名思義，行高（行間距），指在文字中，行與行之間的 基線間的距離 )。
line-height與font-size的計算值之差，在 css 中成為「行間距」。分為兩半，分別加到乙個文字行內容的頂部和底部。
這種文字行高與塊高一致帶來了乙個弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。
1. 利用display: table-cell和vertical-align: middle
在 chrome、firefox 及 ie8 以上的瀏覽器下可以設定塊級元素的 display 為 table-cell（設定為**單元顯示），啟用 vertical-align 屬性，但注意 ie6、7 並不支援這個樣式,
css那些事（一）
一 內邊框padding和外邊框margin屬性縮寫 內外邊框有四個屬性 padding top,padding right,padding bottom,padding left margin top,margin right,margin bottom,margin left。將其簡寫，就是把四...
有關css居中 那點事
前言 怎麼說呢？我以前只知道margin 0 auto 從來沒想過會這麼高深，自從學習了慕課網，我才明白了原來css居中是有很多學問的。首先來說一下分類。分類指的是對什麼樣的元素來進行居中，不同的元素對應不同的方法。1.行內元素 2.定寬的 塊狀元素 定寬的，也就是加了width 100px 這種。...
關於元素垂直居中的那些事
程式設計之道無遠弗屆，御晨風而返。傑佛瑞 詹姆士 這個方法是把元素外邊距設為負值 自身寬高的一半 來實現垂直居中。html css.box main 二 用margin auto 居中 給子元素絕對定位以後，上下左右都為0，在設定乙個margin為 auto 這裡一定要是auto。html css....