CSS中元素水平居中和垂直居中的方法

#CSS中水平居中和垂直居中的方法
1、 水平居中
1.行內元素(文本，圖片等)

若是被設置元素爲文本、圖片等行內元素時,能夠經過給父元素設置` text-align:center;` 來實現

2.定寬塊級元素

能夠經過設置「左右margin」值爲「auto」來實現居中

經常使用的有 `margin:0 auto; `

也能夠寫成`margin-left:auto;margin-right:auto;`

3.不定寬塊級元素

有三種實現方法:
* 加入 table 標籤
  爲須要設置的居中的元素外面加入一個 table 標籤 ( 包括 <tbody>、<tr>、<td> )

  爲這個 table 設置「左右 margin 居中」（這個和定寬塊狀元素的方法同樣）。

  缺點:增長了無語義標籤，加深了標籤的嵌套層數。 

* 設置 display;inline 方法

  改變塊級元素的 dispaly 爲 inline 類型，而後使用 text-align:center 來實現居中效果

  缺點:將塊狀元素轉換成行內元素，少了一些功能，好比設定長度值。

* 設置 position:relative 和 left:50%;

  經過給父元素設置 float，而後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:-50% 來實現水平居中。

  缺點:設置了 position:relative，帶來了必定的反作用。

2、垂直居中 

1.父元素高度肯定的單行文本

 經過設置父元素的 height 和 line-height 高度一致來實現

2.父層高度不肯定的垂直居中 

經過給父層設置相同的上下內邊距實現

3.父元素高度肯定的多行文本、圖片、塊狀元素的垂直居中

實現方法:

* 使用插入 table (包括tbody、tr、td)標籤，同時設置 vertical-align：middle
* 在 chrome、firefox 及 IE8 以上的瀏覽器下能夠設置塊級元素的 display 爲 table-cell，激活 vertical-align 屬性，但IE六、7 並不支持這個樣式。`display:table-cell;vertical-align:middle;`

4 如何使圖片在DIV 中垂直居中
能夠使用設置背景圖片的方法`body {background: url(」sample.gif」) #FFF no-repeat center;}`

讓圖片在容器中居中background.position:center;