css中的居中可分為水平居中和垂直居中。
水平居中分為行內元素居中和塊狀元素居中兩種情況，而塊狀元素又分為定寬塊狀元素居中和不定寬塊狀元素居中。
下面詳細介紹這幾種情況。
一、水平居中
1、行內元素居中
顧名思義，行內元素居中是只針對行內元素的，比如文字（text）、（img）、按鈕等行內元素，
可通過給父元素設定 text-align:center 來實現。
另外，如果塊狀元素屬性display 被設定為inline時，也是可以使用這種方法。
但有個首要條件是子元素必須沒有被float影響，否則一切都是無用功。
hello world
（1）、定寬塊狀元素居中
滿足定寬（塊狀元素的寬度width為固定值）和塊狀兩個條件的元素可以通過設定「左右margin」值為「auto」來實現居中。
hello world
在實際工作中我們會遇到需要為「不定寬度的塊狀元素」設定居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)
有三種方法可以對不定寬塊狀元素進行居中：
方法1：
將要顯示的元素加入到 table 標籤當中，然後為 table 標籤設定「左右margin」值為「auto」來實現居中； 或使用 display : table；然後設該元素「左右margin」值為「auto」來實現居中。後面的display:table; 方法會更簡潔。
為什麼加入table標籤? 是利用table標籤的長度自適應性—即不定義其長度也不預設父元素body的長度（table其長度根據其內文字長度決定），因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
方法2：
改變塊級元素的 display 為 inline 型別（設定為 行內元素 顯示），然後使用 text-align:center 來實現居中效果。
這種方法相比第一種方法的優勢是不用增加無語義標籤，但也存在著一些問題：它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值（變成inline-block就可以設定寬高）。
方法3：
通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left: -50% 來實現水平居中。
hello world
二、垂直居中
垂直居中可分為父元素高度確定的單行文字，以及父元素高度確定的多行文字。
1、父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高，指在文字中，行與行之間的 基線間的距離 )。
有兩種方法：
方法1：
使用插入 table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle。
hello world
hello world
hello world
方法2：
設定塊級元素的 display 為 table-cell（設定為**單元顯示），啟用 vertical-align 屬性。但這種方法相容性比較差， ie6、7 並不支援這個樣式。
參考：
Css之關於塊級元素水平居中
第一種方法 塊級元素如div可以使用margin left auto和margin right auto來實現，但前提是這個塊級元素必須是設定了固定寬度的。對於不能確定寬度的塊級元素就不能這們做了，但是我們可以用table這個標籤來實現。它的寬度由內部的元素決定 撐開 即使不給它設定固定寬度，對它設...
Css之關於塊級元素水平居中
第一種方法 塊級元素如div可以使用margin left auto和margin right auto來實現，但前提是這個塊級元素必須是設定了固定寬度的。對於不能確定寬度的塊級元素就不能這們做了，但是我們可以用table這個標籤來實現。它的寬度由內部的元素決定 撐開 即使不給它設定固定寬度，對它設...
水平居中塊級元素較好的實現
如上圖所示，要做圖中黃色區域的到期提醒，要求提醒的內容 提醒的內容是指黃色背景上的圖示和文字 居中顯示。我將圖中的驚嘆號標識做為提醒內容的背景處理，而這就要求內容區有乙個高度，所以內容區必須是block level的。但block level的元素的寬度預設等於父元素的寬度，這樣的話內容將從黃色左邊...