一.水平居中
1.行內元素
如果設定行內元素時，水平居中是通過給父元素設定 來text-align:center實現的。
(父元素和子元素：如下面的html**中，div是「我想要在父容器中水平居中顯示」這個文字的父元素。反之,這個文字是div的子元素 .)
在父容器中水平居中顯示。
如果是塊狀元素,text-align:center就不起作用了.
(1).定寬(寬度width為固定值)
定寬塊狀元素--->水平居中顯示。
比如網頁上的分頁導航，因為分頁的數量是不確定的，所以不能通過設定寬度來限制它的彈性。
不定寬度的塊狀元素有三種方法居中：
① . 加入 table 標籤
利用table標籤的長度自適應性—即不定義其長度也不預設父元素body的長度,table其長度根據其內文字長度決定，因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
step1:為需要設定的居中的元素外面加入乙個 table 標籤 ( 包括、、)。
step2:為這個 table 設定「左右 margin 居中」（和定寬塊狀元素的方法一樣）。
與第一種類似，顯示型別設為 行內元素，進行不定寬元素的屬性設定.
改變塊級元素的 display 為 inline 型別（設定為 行內元素 顯示），然後使用 text-align:center 來實現居中效果。
③.設定 position:relative 和 left:50%
通過給父元素設定float，然後給父元素設定position:relative和left:50%，子元素設定position:relative和left: -50%來實現水平居中。
可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css**是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css**則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。
1.單行文字
通過設定父元素的height和line-height高度一致來實現的。(height: 該元素的高度，line-height: 行高（行間距），指在文字中，行與行之間的 基線間的距離 )。
line-height與font-size的計算值之差，在 css 中成為「行間距」。分為兩半，分別加到乙個文字行內容的頂部和底部。
這種文字行高與塊高一致帶來了乙個弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。
hi~~~~~~~~~~~~~~~
(1).方法一
使用插入table(包括tbody、tr、td)標籤，同時設定vertical-align：middle。
css 中有乙個用於豎直居中的屬性vertical-align，在父元素設定此樣式時，會對inline-block型別的子元素都有用。
看我是否可以居中。
table tdtd標籤預設情況下就預設設定了vertical-align為 middle，所以不需要顯式地設定了。
(2).方法二(相容性差,僅供參考)
在 chrome、firefox 及 ie8 以上的瀏覽器下可以設定塊級元素的display為table-cell（設定為**單元顯示），啟用vertical-align屬性，但注意 ie6、7 並不支援這個樣式, 相容性比較差。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
CSS實現水平垂直居中小結
水平居中實現只要設定margin 0 auto 就可以實現 lang en charset utf 8 水平居中title type text css box style head id box div body html lang en charset utf 8 垂直居中title type t...
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...