#CSS中水平居中和垂直居中的方法
一、 水平居中
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，帶來了一定的副作用。
二、垂直居中
1.父元素高度確定的單行文本
通過設置父元素的 height 和 line-height 高度一致來實現
2.父層高度不確定的垂直居中
通過給父層設置相同的上下內邊距實現
3.父元素高度確定的多行文本、圖片、塊狀元素的垂直居中
實現方法:
* 使用插入 table (包括tbody、tr、td)標簽，同時設置 vertical-align：middle
* 在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell，激活 vertical-align 屬性，但IE6、7 並不支持這個樣式。`display:table-cell;vertical-align:middle;`
4 如何使圖片在DIV 中垂直居中
可以使用設置背景圖片的方法`body {background: url(”sample.gif”) #FFF no-repeat center;}`
讓圖片在容器中居中background.position:center;