首先，依舊是概念。介紹一下行內元素和塊級元素，這個很重要，因為有的屬性只能用於塊元素，而有的正好相反，在一定的情況下，它們也可以相互轉換，比如用display來進行設定。

行內元素（又叫內聯元素inline element）:

①不佔據一整行，隨內容而定，有以下特點：

②不可以設定寬高，也不可以設定行高，其寬度隨著內容增加，高度隨字型大小而改變。

③內聯元素可以設定外邊界，但是外邊界不對上下起作用，只能對左右起作用。

④也可以設定內邊界，但是內邊界在ie6中不對上下起作用，只能對左右起作用。

    常用的內聯元素有：

a - 錨點，b - 粗體(不推薦)，br - 換行，em - 強調，

塊級元素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 的元素的子元素出現。

現在開始說一下簡單的幾種基礎的居中方式：

1.塊中文字水平居中：text-align 用於塊級元素，作用在使用它的塊元素中的文字或者圖片上。使得它們在水平方向上居中。

    這個屬性只能作用於塊元素（或者被CSS控制為塊元素的內聯元素，但是被控制為內聯元素的塊元素是不行的）。一句話來說，就是要擁有塊元素的特點的那些元素。這個很好理解，居中，肯定是行居中，如果使用它的元素本身不擁有完整的在寬度上的獨立空間，它當然沒有能力讓它內部的文字或者圖片居中。（難道要佔用別人的地盤裡居中，豈不混亂啦）

例子：

    <p style="text-align:center">我是正常p,我設定了居中</p>

    <span style="display:block; text-align:center">我其實是一個行內元素span哦，我設定了居中，可以居中並且獨佔一行</span> 

    <p style="display:inline; text-align:center">能不能再同一行,我是被inline了的p，我設定了居中可是不能居中！</p>

    父元素的這個屬性對它下面的子元素也起作用，比如一個div設定了text-align居中，則它內部的文字可以居中，它的子div內部的文字也可以居中。但是子元素中文字的居中，是在子div中居中，而不是對於父div居中。也就是，它裡面所有的文字，都會相對於最靠近自己的一層div來實現居中。所以，這個屬性不能用於div在父div中的整體居中。（不僅僅是div，所有的表現為塊元素的元素）。

下面的這段程式碼，外面一個大的藍色的div，裡面一個小的紅色的div。外部的div設定了水平居中，按說裡面的圖片肯定會居中（執行時確實顯示居中），

而內部的div只設置了vertical-align，垂直居中（先不管它）。可是因為它父層的text-align對它也有影響，所以執行時，裡面的文字會相對於內部div而居中（注意！不是相對於最外面的div)

　　<div  style="width:500px; height:200px; background-color:#39F; text-align:center">
　　　　<img src="dog/134906m121hqwumyw3uudc.jpg" width="96" height="80" />
　　　　<div style="width:100px; height:50px; background-color:#F69; display: table-cell;vertical-align:middle">啦啦啦</div>
　　</div>

    這個是塊元素對內處理的一個屬性，不能把這個塊自己在它的父容器中居中，若要實現塊在父元素中的居中，可以使用：

2 塊元素自身水平居中（確定設定了寬度的塊）：margin。這個肯定是接觸CSS一開始就知道的了。

    一般情況下，可以設定margin:0 auto;這會使這個塊級元素在它的父級元素中居中，上下左右都會居中。

    如果只要水平居中的話，就設定margin-left:auto;margin-right:auto;

3 塊元素自身水平居中（不確定寬度的塊）：

　　在其他的一些文章中，看到有不少方法來介紹不確定寬度的塊的居中的。

　　其實簡單點說，不需要這麼麻煩。我們可以這樣來理解，沒有明確設定寬度的block，根據塊級元素的性質，它預設是獨佔一行的，所以這個時候block本身就是瀏覽器視窗的寬度，就不必要來設定水平居中了。

　　若是此時對塊中的內容進行居中的話：

　　如果塊元素的子元素也為塊元素，就對子元素使用margin auto一類的方式就好啦；

　　如果塊級元素的子元素為行內元素，就用我們一開始介紹的text-align也就可以解決；

　　對於子元素為塊元素的，也可以用display設定為inline然後再用text-align。

    （這些在本文其他地方也都說過了）

4 vertical-align用於行內元素中的垂直居中

vertical-align，這個可以用的很複雜。看了一些文章和例子，自己也有點小混亂，只說一下最簡單的用法：

　　這個屬性用於

　　1、內聯元素（以及被轉化為內聯元素的塊元素）

　　2 、display設定為table-cell的元素，

　　在 firefox 和 ie8 下，可以設定塊級元素的 display 值為 table-cell，來啟用 vertical-align 屬性，顯示效果和就和表格中的 valign="center" 一樣了。但 ie6,7 並不支援。

　　3、<td><tr>這樣的元素

　　這樣的寫法：vertical-align:middle;就可以設定文字或者圖片的垂直居中。只要具有行內元素的特性的元素使用這個屬性，對它的子元素中的文字和圖片也是起作用的。但是作用效果為使得文字或者圖片相對於緊靠著它們的父元素來進行居中。這個和text-align上面說過的部分是類似的。

5 塊級元素中的文字圖片垂直居中（針對塊的高度確定的，這個是從另一個部落格上看到的，真的很實用哦，如果塊內只有這些文字的話）

    文字在層（塊級元素）中垂直居中vertical-align 屬性是做不到的.我們這裡有個比較巧妙的方法就是:設定height的高度與line-height的高度相同! 

6 塊級元素中的文字圖片垂直居中（塊的高度不確定的）

　　在塊的高度不確定的情況下，其實它的高度就是取決於裡面內容的高度。如果內部只有文字或者圖片的話，那就自然垂直居中了，其實就不必特意要設定。

如果非要設定什麼的話，比如希望塊大一些，文字在塊中垂直居中好看一點，可以設定內邊距，如padding-top:20px;padding-bottom:20px；

　　 當然，如果上下內邊距設定的不一樣，就自然不居中了。

7 塊級元素自身的垂直居中

　　設定塊級元素自身在父元素中的垂直居中，可以參照塊級元素的水平居中的方法（上面說過），設定外邊距即可。如果不想設定水平居中，只要設定上下外邊距為auto就好。

也可以採用vertical-align:middle;的方式，但是前提是把display設定為table-cell。這樣的話要注意瀏覽器相容性問題。

評論中有朋友希望能貼參考文章的地址，現在找了當時看的一些來貼一下，只有一部分，很多是隨機看的。是疏忽了，應該當時記下來才是~

還有很多“百度知道”.....

有的比較複雜的靈活用法就沒有寫上去，只能保證總結的這些都是用過和試過的，比較常用和基礎的，應該是沒有問題的。也請大家多多指教吶~

還有利用position的這部分，過幾天，再試一試之後再繼續做一下筆記~

http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html#2666239

（這是別人的博文的連結，關於position的，先貼上來，可以先學習一下~）