垂直居中之父元素高度確定的文字

父元素高度確定的文字

分為：單行文字和多行文字。

1、如何設定單行文字垂直居中呢？

父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和line-height

高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文字中，行與行之間的基線間的距離 )。

line-height與 font-size的計算值之差，在css 中成為「行間距」。分為兩半，分別加到乙個文字行內容的頂部和底部。如下圖所示：

使用單行文字的缺點：當文字內容的長度大於塊的寬時，就有內容脫離了塊。

1

doctype html
>
2<
html
>
3<
head
>
4<
title
>
title
>
5<
meta 
charset
="utf-8"
>
6<
style
>
7.wrap h2
13style
>
14head
>
15<
body
>
16<
div 
class
="wrap"
>
17<
h2>hi,imooc!
h2>
18div
>
19body
>
20html
>

2、如何設定多行文字垂直居中呢？

方法一：使用插入 table

(包括tbody、tr、td)標籤，同時設定vertical-align：middle。

css 中有乙個用於豎直居中的屬性 vertical-align，在父元素設定此樣式時，會對inline-block型別的子元素都有用。

1

doctype html
>
2<
html
>
3<
head
>
4<
title
>
title
>
5<
meta 
charset
="utf-8"
>
6<
style
>
7.wrap
8style
>
9head
>
10<
body
>
11<
table
><
tbody
><
tr><
td class
="wrap"
>
12<
div>
13<
p>看我是否可以居中。
p>
14<
p>看我是否可以居中。
p>
15<
p>看我是否可以居中。
p>
16<
p>看我是否可以居中。
p>
17<
p>看我是否可以居中。
p>
18div
>
19td
>
tr>
tbody
>
table
>
20body
>
21html
>

注：td 標籤預設情況下就預設設定了vertical-align 為middle，所以我們不需要顯式地設定了。

方法二：在chrome、firefox 及ie8 以上的瀏覽器下可以設定塊級元素的display 為table-cell（設定為**單元顯示），啟用vertical-align屬性，但注意ie6、7 並不支援這個樣式, 相容性比較差。

注：這種方法的好處是不用新增多餘的無意義的標籤，但缺點也很明顯，它的相容性不是很好，不相容ie6、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質。

html**：

<

div 
class
="container"
>
<
div>
<
p>看我是否可以居中。
p>
<
p>看我是否可以居中。
p>
<
p>看我是否可以居中。
p>
div>
div>

<

style
>
.container
style
>

垂直居中 父元素高度確定的多行文字（方法一）

父元素高度確定的多行文字 塊狀元素的豎直居中的方法有兩種 方法一 使用插入 table 包括tbody tr td 標籤，同時設定 vertical align middle。說到豎直居中，css 中有乙個用於豎直居中的屬性 vertical align，但這個樣式只有在父元素為 td 或 th 時...

垂直居中 父元素高度確定的多行文字（方法一）

父元素高度確定的多行文字 等的豎直居中的方法有兩種 方法一 使用插入 table 包括tbody tr td 標籤，同時設定vertical align middle。css 中有乙個用於豎直居中的屬性 vertical align，在父元素設定此樣式時，會對inline block型別的子元素都有...

DIV不確定高度內部元素水平垂直居中的方法歸納

看題目就知道是利用父標籤的 display table cell,該屬性指讓標籤元素以 單元格的形式呈現，類似於td標籤。目前ie8 以及其他現代瀏覽器都是支援此屬性的。那麼既然父標籤已經是類似 單元了，那麼就可以利用 單元的屬性vertical align middle 來使得內部元素垂直居中了，...