一、行內元素-水平居中
在父元素的樣式中新增：
text-align:center;
二、定寬塊級元素-水平居中
所謂定寬塊級元素指塊級元素的寬度指定，而不是預設的100%，否則此方法無效；
**：
html:<
body
>
<
div>我是定寬塊狀元素，哈哈，我要水平居中顯示。
div>
body
>
css:
<
style
>
divstyle
>
三、不定寬塊級元素-水平居中
三種思路：
加入 table 標籤，將這個table居中；
設定 display: inline 方法：與第一種類似，顯示型別設為 行內元素，進行不定寬元素的屬性設定；
html:<
body
>
<
div
class
="container"
>
<
ul>
<
li><
a href
="#"
>1
a>
li>
<
li><
a href
="#"
>2
a>
li>
<
li><
a href
="#"
>3
a>
li>
ul>
div>
body
>
css:
<
style
>
.container
/*margin:0;padding:0（消除文字與div邊框之間的間隙）
*/.container ul
/*margin-right:8px（設定li文字之間的間隔）
*/.container li
style
>
以上是例子**。
設定 position:relative 和 left:50%：利用 相對定位 的方式，將元素向左偏移 50% ，即達到居中的目的；
四、父元素高度確定的單行文字-垂直居中
思路：設定父元素的 height 和 line-height 高度一致來實現。line-height與 font-size的計算值之差，在css 中成為「行間距」。分為兩半，分別加到乙個文字行內容的頂部和底部。
height:該元素的高度；
line-height:行高（行間距），在文字中，行與行之間基線的距離。
注意：這種文字行高與塊高一致帶來了乙個弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>垂直居中
title
>
<
style
>
.wrap h2
style
>
head
>
<
body
>
<
div
class
="wrap"
>
<
h2>hi,imooc!
h2>
div>
body
>
html
>
五、父元素高度確定的多行文字-垂直居中
兩個思路：
1.使用插入 table
(包括tbody、tr、td)標籤，同時設定vertical-align：middle。
css 中有乙個用於豎直居中的屬性 vertical-align，在父元素設定此樣式時，會對inline-block型別的子元素都有用。
html:<
body
>
<
table
><
tbody
><
tr><
td class
="wrap"
>
<
div>
<
p>看我是否可以居中。
p>
div>
td>
tr>
tbody
>
table
>
body
>
css:
table td
2.在chrome、firefox 及ie8 以上的瀏覽器下可以設定塊級元素的display 為table-cell（設定為**單元顯示），啟用vertical-align 屬性，但注意ie6、7 並不支援這個樣式, 相容性比較差。
html:<
div
class
="container"
>
<
div>
<
p>看我是否可以居中。
p>
<
p>看我是否可以居中。
p>
<
p>看我是否可以居中。
p>
div>
div>
css:
<
style
>
.container
style
>
css居中小結
直接設定其父元素 ourter 不管有幾個行內元素，一行 即可搞定，so easy 也非常簡單吶 設定該塊級元素 div 但是！但是！如果該元素的position為absolute的話，該方法會失效。我是這樣理解的 margin為auto即相當於外邊距的值是自動的，相對的，所以在絕對定位下將失效。不...
css居中小結
從css入門就開始接觸，無所不在的，一直備受爭議的居中問題。css居中分為水平居中和垂直居中，水平居中方式也較為常見和統一，垂直居中的方法就千奇百怪了。本文一下 中 outer是父元素的類名，inner塊級代表子元素,span代表行內子元素 直接設定其父元素 ourter不管有幾個行內元素，一行 即...
CSS筆記 6 水平 垂直居中 小技巧
一.水平居中 1.行內元素 如果設定行內元素時，水平居中是通過給父元素設定 來text align center實現的。父元素和子元素 如下面的html 中，div是 我想要在父容器中水平居中顯示 這個文字的父元素。反之,這個文字是div的子元素 在父容器中水平居中顯示。2.塊狀元素 如果是塊狀元素...