我們在實際工作中常會遇到需要設定水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。
這裡我們又得分兩種情況：行內元素 還是 塊狀元素 ，塊狀元素又分為定寬塊狀元素，以及不定寬塊狀元素 ;
1 . 行內元素居中
如果被設定的元素為文字 , 等行內元素時 , 水平居中就是通過給父元素設定 : text-align:center來實現的 ;
示例 :
html**：我想要在父容器中水平居中顯示。css**：
2 . 塊元素居中
對於塊元素的居中 , 又可以分為定寬塊元素和不定寬塊元素兩種情況 , 接下來我們來分別了解一下 :⑴ . 定寬塊元素居中
定寬塊元素就是元素的width屬性有固定值 , 滿足定寬和塊元素兩個條件的元素可以通過設定左右margin值為'auto'來實現水平居中(上下margin值隨意) ;
示例 :
html**：
我是定寬塊狀元素，哈哈，我要水平居中顯示。css**：
⑵ . 不定寬塊元素居中
在實際工作中我們會遇到需要為「不定寬度的塊狀元素」設定居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)
① . 加入table標籤
利用table標籤的長度自適應性---即不定義其長度也不預設父元素body的長度（table其長度根據其內文字長度決定），因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
第一步 :
為需要設定的居中的元素外面加入乙個 table 標籤 ( 包括 、、) ;
第二步 :
為這個 table 設定「左右 margin 居中」（這個和定寬塊狀元素的方法一樣）。
示例 :
html**：
css**：
② . 設定 display: inline 與第一種類似，顯示型別設為行內元素，進行不定寬元素的屬性設定 ;
示例 :
html**：
css**：
③ . 通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left: -50% 來實現水平居中 ;
示例 :
html**：
css**：
3 . 垂直居中
我們在實際工作中也會遇到需要設定垂直居中的場景，比如好多報紙的文章標題在左右一側時，常常會設定為垂直居中，為了使用者體驗性好 ;這裡我們又得分兩種情況：父元素高度確定的單行文字，以及父元素高度確定的多行文字 ;
⑴ . 父元素高度確定的單行文字
父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文字中，行與行之間的 基線間的距離 )。
示例 :
html**：
hi,imooc!css**：
⑵ . 父元素高度確定的多行文字
① . 使用插入 table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle ;
css 中有乙個用於豎直居中的屬性 vertical-align，在父元素設定此樣式時，會對inline-block型別的子元素都有用 ;
示例 :
html**：
css**：看我是否可以居中。
table td
② . 在 chrome、firefox 及 ie8 以上的瀏覽器下可以設定塊級元素的 display 為 table-cell（設定為**單元顯示），啟用 vertical-align 屬性，但注意 ie6、7 並不支援這個樣式, 相容性比較差 ;
示例 :
特別注意 :html**：
看我是否可以居中。css**：看我是否可以居中。
看我是否可以居中。
這種方法的好處是不用新增多餘的無意義的標籤，但缺點也很明顯，它的相容性不是很好，不相容 ie6、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質 ;
css中的居中問題
行內內容的居中 如何讓乙個容器的行內內容 文字和行內元素 inline inlineblock 居中 當然inline block比較特殊，即有行內屬性，又有塊級屬性 有以下方法 text align center水平居中。在塊級父級元素上設定text align center，其內部的inline...
CSS中居中的方法
首先明確行內元素 inline 塊級元素 block 行內塊元素 inline block 的區別和聯絡。行內元素 塊級元素 行內塊元素 放置方式 與其他行內元素位於同一行 每個塊元素獨佔一行 除非用一些方法來脫離文件流，如浮動 float 或定位 與其他行內元素或行內塊元素位於同一行 寬高設定 不...
CSS中的居中效果
在css網頁布局中，我們會用到很多div塊，在這些div塊中的內容，我們會用居中的方式讓其進行水平或垂直居中，那麼有哪些居中的方式呢？1 使用margin 0 auto 實現水平居中 居中測試 2 使用text align center 實現對內容的水平居中 居中測試 3 使用position ab...