介紹一下行內(nèi)元素和塊級(jí)元素锄俄，這個(gè)很重要技竟，因?yàn)橛械膶傩灾荒苡糜趬K元素冰肴，而有的正好相反，在一定的情況下榔组，它們也可以相互轉(zhuǎn)換熙尉，比如用display來進(jìn)行設(shè)置。

常用的內(nèi)聯(lián)元素有：
a - 錨點(diǎn)
b - 粗體(不推薦)
br - 換行
em - 強(qiáng)調(diào)
font - 字體設(shè)定(不推薦)
i - 斜體
img - 圖片
input - 輸入框
label - 表格標(biāo)簽
select - 項(xiàng)目選擇
small - 小字體文本
span - 常用內(nèi)聯(lián)容器瓷患，定義文本內(nèi)區(qū)塊
strike - 中劃線
strong - 粗體強(qiáng)調(diào)
行內(nèi)元素（又叫內(nèi)聯(lián)元素inline element）:
①不占據(jù)一整行骡尽，隨內(nèi)容而定，有以下特點(diǎn)：
②不可以設(shè)置寬高擅编，也不可以設(shè)置行高攀细，其寬度隨著內(nèi)容增加，高度隨字體大小而改變爱态。
③內(nèi)聯(lián)元素可以設(shè)置外邊界谭贪，但是外邊界不對(duì)上下起作用，只能對(duì)左右起作用锦担。
④也可以設(shè)置內(nèi)邊界俭识，但是內(nèi)邊界在ie6中不對(duì)上下起作用，只能對(duì)左右起作用洞渔。

常用的塊級(jí)元素有：
div -最常用的塊級(jí)元素
dl - 和dt dd搭配使用的塊級(jí)元素
form - 交互表單
h1 - 大標(biāo)題
hr - 水平分隔線
ol - 排序表單
p - 段落
ul - 非排序列表

塊級(jí)元素block element特點(diǎn)：
①總是在新行上開始套媚，占據(jù)一整行；
②高度磁椒，行高以及外邊距和內(nèi)邊距都可控制堤瘤；
③寬帶始終是與瀏覽器寬度一樣，與內(nèi)容無關(guān)浆熔；
④它可以容納內(nèi)聯(lián)元素和其他塊元素本辐。

互相轉(zhuǎn)換：使用display設(shè)置可以使得行內(nèi)元素?fù)碛袎K級(jí)元素的特性，反之也可以。
如： <p style="display:inline; text-align:center">我是被設(shè)置了內(nèi)聯(lián)的塊元素p慎皱，我現(xiàn)在的表現(xiàn)形式和內(nèi)聯(lián)元素一樣啦</p>
<span style="display:block; text-align:center">我是被設(shè)置了塊級(jí)元素的span老虫，我現(xiàn)在可以獨(dú)占一行并且可以設(shè)置寬高</span>
display: table-cell ，能把元素當(dāng)作表格單元來顯示茫多，這個(gè)非常實(shí)用祈匙，顯示效果也很好，只可惜某些瀏覽器不夠兼容地梨。要注意菊卷，和一個(gè)合法的<td>元素必須在<table>里一樣， display: table-cell 元素必須作為 display: table 的元素的子元素出現(xiàn)宝剖。

現(xiàn)在開始說一下簡(jiǎn)單的幾種基礎(chǔ)的居中方式：
1.1. 塊中文字水平居中：text-align 用于塊級(jí)元素洁闰，作用在使用它的塊元素中的文字或者圖片上。使得它們?cè)谒椒较蛏暇又小?br> 這個(gè)屬性只能作用于塊元素（或者被CSS控制為塊元素的內(nèi)聯(lián)元素万细，但是被控制為內(nèi)聯(lián)元素的塊元素是不行的）扑眉。一句話來說，就是要擁有塊元素的特點(diǎn)的那些元素赖钞。這個(gè)很好理解腰素，居中，肯定是行居中雪营，如果使用它的元素本身不擁有完整的在寬度上的獨(dú)立空間弓千，它當(dāng)然沒有能力讓它內(nèi)部的文字或者圖片居中。（難道要占用別人的地盤里居中献起，豈不混亂啦）
例子：
<p style="text-align:center">我是正常p,我設(shè)置了居中</p> <span style="display:block; text-align:center">我其實(shí)是一個(gè)行內(nèi)元素span哦洋访，我設(shè)置了居中，可以居中并且獨(dú)占一行</span> <p style="display:inline; text-align:center">能不能再同一行,我是被inline了的p谴餐，我設(shè)置了居中可是不能居中姻政！</p>
父元素的這個(gè)屬性對(duì)它下面的子元素也起作用，比如一個(gè)div設(shè)置了text-align居中岂嗓，則它內(nèi)部的文字可以居中汁展，它的子div內(nèi)部的文字也可以居中。但是子元素中文字的居中厌殉，是在子div中居中食绿，而不是對(duì)于父div居中。也就是公罕，它里面所有的文字器紧，都會(huì)相對(duì)于最靠近自己的一層div來實(shí)現(xiàn)居中。所以熏兄，這個(gè)屬性不能用于div在父div中的整體居中。（不僅僅是div，所有的表現(xiàn)為塊元素的元素）桥状。

下面的這段代碼，外面一個(gè)大的藍(lán)色的div硝清，里面一個(gè)小的紅色的div辅斟。外部的div設(shè)置了水平居中，按說里面的圖片肯定會(huì)居中（運(yùn)行時(shí)確實(shí)顯示居中）芦拿， 而內(nèi)部的div只設(shè)置了vertical-align士飒，垂直居中（先不管它）≌崞椋可是因?yàn)樗笇拥膖ext-align對(duì)它也有影響酵幕，所以運(yùn)行時(shí)，里面的文字會(huì)相對(duì)于內(nèi)部div而居中（注意缓苛！不是相對(duì)于最外面的div)

代碼如下:
<div style="width:500px; height:200px; text-align:center"> 　　
<img src="dog/134906m121hqwumyw3uudc.jpg" width="96" height="80" /> 　
<div style="width:100px; height:50px; display: table-cell;vertical-align:middle">啦啦啦</div> 　
</div>

Paste_Image.png

（1）]這個(gè)是塊元素對(duì)內(nèi)處理的一個(gè)屬性芳撒，不能把這個(gè)塊自己在它的父容器中居中，若要實(shí)現(xiàn)塊在父元素中的居中未桥，可以使用：
2 2. 塊元素自身水平居中（確定設(shè)置了寬度的塊）：margin笔刹。這個(gè)肯定是接觸CSS一開始就知道的了。
一般情況下冬耿，可以設(shè)置margin:0 auto;這會(huì)使這個(gè)塊級(jí)元素在它的父級(jí)元素中居中舌菜，上下左右都會(huì)居中。
如果只要水平居中的話亦镶，就設(shè)置margin-left:auto;margin-right:auto;
3 3. 塊元素自身水平居中（不確定寬度的塊）： 　　
在其他的一些文章中日月，看到有不少方法來介紹不確定寬度的塊的居中的。 　　
其實(shí)簡(jiǎn)單點(diǎn)說染乌，不需要這么麻煩山孔。我們可以這樣來理解，沒有明確設(shè)定寬度的block荷憋，根據(jù)塊級(jí)元素的性質(zhì)台颠，它默認(rèn)是獨(dú)占一行的，所以這個(gè)時(shí)候block本身就是瀏覽器窗口的寬度勒庄，就不必要來設(shè)置水平居中了串前。
　　
若是此時(shí)對(duì)塊中的內(nèi)容進(jìn)行居中的話： 　　
如果塊元素的子元素也為塊元素，就對(duì)子元素使用margin auto一類的方式就好啦实蔽； 　　
如果塊級(jí)元素的子元素為行內(nèi)元素荡碾，就用我們一開始介紹的text-align也就可以解決； 　　
對(duì)于子元素為塊元素的局装，也可以用display設(shè)置為inline然后再用text-align坛吁。 （這些在本文其他地方也都說過了）
4 4. vertical-align用于行內(nèi)元素中的垂直居中
vertical-align劳殖，這個(gè)可以用的很復(fù)雜〔β觯看了一些文章和例子哆姻，自己也有點(diǎn)小混亂，只說一下最簡(jiǎn)單的用法： 　　
這個(gè)屬性用于 　　
1玫膀、內(nèi)聯(lián)元素（以及被轉(zhuǎn)化為內(nèi)聯(lián)元素的塊元素） 　　
2 矛缨、display設(shè)置為table-cell的元素， 　　
在 firefox 和 ie8 下帖旨，可以設(shè)置塊級(jí)元素的 display 值為 table-cell箕昭，來激活 vertical-align 屬性，顯示效果和就和表格中的 valign="center" 一樣了解阅。但 ie6,7 并不支持落竹。 　　
3、<td><tr>這樣的元素 　　
這樣的寫法：vertical-align:middle;就可以設(shè)置文字或者圖片的垂直居中瓮钥。只要具有行內(nèi)元素的特性的元素使用這個(gè)屬性筋量，對(duì)它的子元素中的文字和圖片也是起作用的。但是作用效果為使得文字或者圖片相對(duì)于緊靠著它們的父元素來進(jìn)行居中碉熄。這個(gè)和text-align上面說過的部分是類似的桨武。
5 5. 塊級(jí)元素中的文字圖片垂直居中（針對(duì)塊的高度確定的，這個(gè)是從另一個(gè)博客上看到的锈津，真的很實(shí)用哦呀酸，如果塊內(nèi)只有這些文字的話）
文字在層（塊級(jí)元素）中垂直居中vertical-align 屬性是做不到的.我們這里有個(gè)比較巧妙的方法就是:設(shè)置height的高度與line-height的高度相同!

代碼如下:
<div style="line-height:500px;height:500;"></div>

6 6.##塊級(jí)元素中的文字圖片垂直居中（塊的高度不確定的） 　　
在塊的高度不確定的情況下，其實(shí)它的高度就是取決于里面內(nèi)容的高度琼梆。如果內(nèi)部只有文字或者圖片的話性誉，那就自然垂直居中了，其實(shí)就不必特意要設(shè)置茎杂。
如果非要設(shè)置什么的話错览，比如希望塊大一些，文字在塊中垂直居中好看一點(diǎn)煌往，可以設(shè)置內(nèi)邊距倾哺，如padding-top:20px;padding-bottom:20px； 　　
當(dāng)然刽脖，如果上下內(nèi)邊距設(shè)置的不一樣羞海，就自然不居中了。

7 7. ####塊級(jí)元素自身的垂直居中　　
設(shè)置塊級(jí)元素自身在父元素中的垂直居中曲管，可以參照塊級(jí)元素的水平居中的方法（上面說過）却邓，設(shè)置外邊距即可。如果不想設(shè)置水平居中院水，只要設(shè)置上下外邊距為auto就好腊徙。
也可以采用vertical-align:middle;的方式简十，但是前提是把display設(shè)置為table-cell。這樣的話要注意瀏覽器兼容性問題撬腾。