如果被設定元素為文字、等行內元素時，水平居中是通過給父元素設定text-align:center來實現的。如下**：
html**：
我是文字，哈哈，我想要在父容器中水平居中顯示。css**：
當被設定元素為塊狀元素時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
第一種方法
：滿足定寬和塊狀兩個條件的元素是可以通過設定「左右margin」值為「auto」來實現居中的。我們來看個例子就是設定 div 這個塊狀元素水平居中：
html**：
我是定寬塊狀元素，哈哈，我要水平居中顯示。css**： 也可以寫成：
margin-left:auto;注意：元素的「上下 margin」 是可以隨意設定的。margin-right:auto;
第二種方法
：改變塊級元素的 dispaly 為 inline 型別，然後使用 text-align:center 來實現居中效果。如下例子：
html**：
css**： 這種方法相比第一種方法的優勢是不用增加無語義標籤，簡化了標籤的巢狀深度，但也存在著一些問題：它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。
方法三：通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:-50% 來實現水平居中。
**如下：
css**： 這種方法可以保留塊狀元素仍以 display:block 的形式顯示，優點不新增無語議表標籤，不增加巢狀深度，但它的缺點是設定了 position:relative，帶來了一定的***。
這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。
父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。如下**：
hi,imooc!css**：
父元素高度確定的多行文字、、塊狀元素的豎直居中的方法有兩種：
方法一：使用插入 table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle。
說到豎直居中，css 中有乙個用於
豎直居中的屬性 vertical-align
，但這個樣式只有在父元素為 td 或 th 時，才會生效。所以又要插入 table 標籤了。下面看一下例子：
html**：
css**：看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
table td因為
td 標籤預設情況
下就預設設定了 vertical-align 為 middle
，所以我們不需要顯式地設定了。
方法二：
在 chrome、firefox 及 ie8 以上的瀏覽器下可以
設定塊級元素的 display 為 table-cell
，啟用 vertical-align 屬性，但注意
ie6、7 並不支援這個樣式。
html**：
看我是否可以居中。css**： 這種方法的好處是不用新增多餘的無意義的標籤，但缺點也很明顯，它的相容性不是很好，不相容 ie6、7。看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
有乙個有趣的現象就是當為元素（不論之前是什麼型別元素，display:none 除外）設定以下 2 個句之一：
position : absolute
float : left 或 float : right
元素會自動變為以display:inline-block 的方式顯示，當然就可以設定元素的 width 和 height 了且預設寬度不佔滿父元素。
如下面的**，a 標籤是行內元素，所以設定它的 width 是 沒有效果的，但是設定為 position:absolute 以後，就可以了。
進入課程請單擊這裡css**
以上內容參考自慕課網：
CSS樣式（五） CSS高階
1.每個塊級元素預設佔一行高度，一行內新增乙個塊級元素後無法一般無法新增其他元素 float浮動後除外 2.兩個塊級元素連續編輯時，會在頁面自動換行顯示。塊級元素一般可巢狀塊級元素或行內元素 常見塊級元素 1 div 常用塊級容易，也是css layout的主要標籤 2 dl 定義列表 3 h1 h...
CSS（五）CSS復合樣式
乙個css屬性只控制一種樣式，叫做單一樣式。乙個css屬性控制多種樣式，叫做復合樣式。復合的寫法，是通過空格的方式實現的。復合寫法有的是不需要關心順序，例如background border 有的是需要關心順序，例如font。1.backgroud red url repeat 0 0 2.bord...
css樣式設定
1.如何消去a標籤的下劃線 設定樣式text decoration none 首頁 a2.如何設定滑鼠滑過a標籤時，字型的顏色和下劃線重現 a hover 首頁 a hover 3.如何使ul li中li標籤水平放置 1 使li標籤變成內聯塊狀元素 2 使用float left lili 個人更偏向...