?這里涉及到行內(nèi)元素和塊級元素穷躁。
行內(nèi)元素和塊級元素可以相互轉(zhuǎn)換，比如用display來進(jìn)行設(shè)置。
行內(nèi)元素（又叫內(nèi)聯(lián)元素inline element）:不占據(jù)一整行拇惋，隨內(nèi)容而定妄呕。
有以下特點：
?①不可以設(shè)置寬高陶舞，也不可以設(shè)置行高，其寬度隨著內(nèi)容增加绪励，高度隨字體大小而改變吊说。
②內(nèi)聯(lián)元素可以設(shè)置外邊界，但是外邊界不對上下起作用优炬，只能對左右起作用颁井。
③也可以設(shè)置內(nèi)邊界，但是內(nèi)邊界在ie6中不對上下起作用蠢护，只能對左右起作用雅宾。
常用的內(nèi)聯(lián)元素有：
a - 錨點，b - 粗體(不推薦)葵硕，br - 換行眉抬，em - 強調(diào)贯吓，font - 字體設(shè)定(不推薦)，i - 斜體蜀变，img - 圖片悄谐，input - 輸入框，label - 表格標(biāo)簽库北，select - 項目選擇爬舰，small - 小字體文本，span - 常用內(nèi)聯(lián)容器寒瓦，定義文本內(nèi)區(qū)塊情屹，strike - 中劃線，strong - 粗體強調(diào)
塊級元素（block element）：總是在新行上開始杂腰，占據(jù)一整行垃你；
有以下特點：
①高度，行高以及外邊距和內(nèi)邊距都可控制喂很；
②寬帶始終是與瀏覽器寬度一樣惜颇，與內(nèi)容無關(guān)；
③它可以容納內(nèi)聯(lián)元素和其他塊元素少辣。
常用的塊級元素有：
div -最常用的塊級元素官还，dl - 和dt dd搭配使用的塊級元素，form - 交互表單毒坛，h1 - 大標(biāo)題望伦，hr - 水平分隔線，ol - 排序表單煎殷，p - 段落屯伞，ul - 非排序列表
互相轉(zhuǎn)換：使用display設(shè)置可以使得行內(nèi)元素?fù)碛袎K級元素的特性，反之也可以豪直。
display: table-cell 元素必須作為 display: table 的元素的子元素出現(xiàn)劣摇。
現(xiàn)在說一下簡單的幾種基礎(chǔ)的居中方式：
1. ?塊中文字水平居中：text-align 用于塊級元素，作用在使用它的塊元素中的文字或者圖片上弓乙。使得它們在水平方向上居中末融。
這個屬性只能作用于塊元素（或者被CSS控制為塊元素的內(nèi)聯(lián)元素）。居中暇韧，肯定是行居中勾习，如果使用它的元素本身不擁有完整的在寬度上的獨立空間，它當(dāng)然沒有能力讓它內(nèi)部的文字或者圖片居中懈玻。
父元素的這個屬性對它下面的子元素也起作用巧婶，比如一個div設(shè)置了text-align居中，則它內(nèi)部的文字可以居中，它的子div內(nèi)部的文字也可以居中艺栈。但是子元素中文字的居中英岭，是在子div中居中，而不是對于父div居中湿右。也就是诅妹，它里面所有的文字，都會相對于最靠近自己的一層div來實現(xiàn)居中毅人。所以吭狡，這個屬性不能用于div在父div中的整體居中。（不僅僅是div堰塌，所有的表現(xiàn)為塊元素的元素）赵刑。
這個是塊元素對內(nèi)處理的一個屬性分衫，不能把這個塊自己在它的父容器中居中场刑，若要實現(xiàn)塊在父元素中的居中，可以使用：
2 ?塊元素自身水平居中（確定設(shè)置了寬度的塊）：margin蚪战。這個肯定是接觸CSS一開始就知道的了牵现。
一般情況下，可以設(shè)置margin:0 auto;這會使這個塊級元素在它的父級元素中居中邀桑，上下左右都會居中瞎疼。
如果只要水平居中的話，就設(shè)置margin-left:auto;margin-right:auto;
3 ??塊元素自身水平居中（不確定寬度的塊）：
在其他的一些文章中壁畸，看到有不少方法來介紹不確定寬度的塊的居中的贼急。
其實簡單點說，不需要這么麻煩捏萍。我們可以這樣來理解太抓，沒有明確設(shè)定寬度的block，根據(jù)塊級元素的性質(zhì)令杈，它默認(rèn)是獨占一行的走敌，所以這個時候block本身就是瀏覽器窗口的寬度，就不必要來設(shè)置水平居中了逗噩。
若是此時對塊中的內(nèi)容進(jìn)行居中的話：
如果塊元素的子元素也為塊元素掉丽，就對子元素使用margin auto一類的方式就好啦；
如果塊級元素的子元素為行內(nèi)元素异雁，就用我們一開始介紹的text-align也就可以解決捶障；
對于子元素為塊元素的，也可以用display設(shè)置為inline然后再用text-align纲刀。
4 ??vertical-align用于行內(nèi)元素中的垂直居中
vertical-align残邀，這個可以用的很復(fù)雜。看了一些文章和例子芥挣，自己也有點小混亂驱闷，只說一下最簡單的用法：
這個屬性用于
1、內(nèi)聯(lián)元素（以及被轉(zhuǎn)化為內(nèi)聯(lián)元素的塊元素）
2 空免、display設(shè)置為table-cell的元素空另，
在 firefox 和 ie8 下，可以設(shè)置塊級元素的 display 值為 table-cell蹋砚，來激活 vertical-align 屬性扼菠，顯示效果和就和表格中的 valign="center" 一樣了。但 ie6,7 并不支持坝咐。
這樣的寫法：vertical-align:middle;就可以設(shè)置文字或者圖片的垂直居中循榆。只要具有行內(nèi)元素的特性的元素使用這個屬性，對它的子元素中的文字和圖片也是起作用的墨坚。但是作用效果為使得文字或者圖片相對于緊靠著它們的父元素來進(jìn)行居中秧饮。這個和text-align上面說過的部分是類似的。
5 ? 塊級元素中的文字圖片垂直居中（針對塊的高度確定的泽篮，這個是從另一個博客上看到的盗尸，真的很實用哦，如果塊內(nèi)只有這些文字的話）
文字在層（塊級元素）中垂直居中vertical-align屬性是做不到的.我們這里有個比較巧妙的方法就是:設(shè)置height的高度與line-height的高度相同!
6 ??塊級元素中的文字圖片垂直居中（塊的高度不確定的）
在塊的高度不確定的情況下帽撑，其實它的高度就是取決于里面內(nèi)容的高度泼各。如果內(nèi)部只有文字或者圖片的話，那就自然垂直居中了亏拉，其實就不必特意要設(shè)置扣蜻。
如果非要設(shè)置什么的話，比如希望塊大一些及塘，文字在塊中垂直居中好看一點莽使，可以設(shè)置內(nèi)邊距，如padding-top:20px;padding-bottom:20px磷蛹；
當(dāng)然吮旅，如果上下內(nèi)邊距設(shè)置的不一樣，就自然不居中了味咳。
7 ??塊級元素自身的垂直居中
設(shè)置塊級元素自身在父元素中的垂直居中庇勃，可以參照塊級元素的水平居中的方法（上面說過），設(shè)置外邊距即可槽驶。如果不想設(shè)置水平居中责嚷，只要設(shè)置上下外邊距為auto就好。
也可以采用vertical-align:middle;的方式掂铐，但是前提是把display設(shè)置為table-cell罕拂。這樣的話要注意瀏覽器兼容性問題揍异。
