行內元素和塊級元素水平及垂直居中問題
首先，介紹一下行內元素和塊級元素，這個很重要，因為有的屬性只能用於塊元素，而有的正好相反，在一定的情況下，它們也可以相互轉換，比如用display來進行設定。
行內元素:
①不佔據一整行，隨內容而定，有以下特點：
②不可以設定寬高，也不可以設定行高，其寬度隨著內容增加，高度隨字型大小而改變。
③內聯元素可以設定外邊界，但是外邊界不對上下起作用，只能對左右起作用。
④也可以設定內邊界，但是內邊界在ie6中不對上下起作用，只能對左右起作用。
常用的內聯元素有：
a - 錨點，b - 粗體(不推薦)，br - 換行，em - 強調，font - 字型設定(不推薦)，i - 斜體，img - 圖片，input - 輸入框，label - 表格標籤，select - 專案選擇，small - 小字型文字，span - 常用內聯容器，定義文字內區塊，strike - 中劃線，strong - 粗體強調
塊級元素block element：
①總是在新行上開始，佔據一整行；
②高度，行高以及外邊距和內邊距都可控制；
③寬頻始終是與瀏覽器寬度一樣，與內容無關；
④它可以容納內聯元素和其他塊元素。
常用的塊級元素有：
div -最常用的塊級元素，dl - 和dt dd搭配使用的塊級元素，form - 互動表單，h1 - 大標題，hr - 水平分隔線，ol - 排序表單，p - 段落，ul - 非排序列表
互相轉換：使用display設定可以使得行內元素擁有塊級元素的特性，反之也可以。
如：
<p style="display:inline; text-align:center">我是被設定了內聯的塊元素p，我現在的表現形式和內聯元素一樣啦</p>
<span style="display:block; text-align:center">我是被設定了塊級元素的span，我現在可以獨佔一行並且可以設定寬高</span>
display: table-cell ，能把元素當作表格單元來顯示，這個非常實用，顯示效果也很好，只可惜某些瀏覽器不夠相容。要注意，和一個合法的<td>元素必須在<table>裡一樣，
display: table-cell 元素必須作為 display: table 的元素的子元素出現。
CSS設定行內元素的水平居中
- div{text-align:center} /*DIV內的行內元素均會水平居中*/
CSS設定行內元素的垂直居中
- div{height:30px; line-height:30px} /*DIV內的行內元素均會垂直居中*/
PS:當然，如果既要水平居中又要垂直居中，那麼綜合一下
- div{text-align:center; height:30px; line-height:30px}
CSS設定塊級元素的水平居中
- div p{margin:0 auto; width:500px} /*塊級元素p一定要設定寬度，
- 才能相當於DIV父容器水平居中*/
CSS設定塊級元素的垂直居中
- div{width:500px} /*DIV父容器設定寬度*/
- div p{margin:0 aut0; height:30px; line-height:30px} /*塊級元素p也可以加個寬度，
- 以達到相對於DIV父容器的水平居中效果*/