程序開發(fā)中的垂直居中實(shí)戰(zhàn)教程。

一、垂直居中

(系統(tǒng)筆記之) 父元素高度確定的【單行】文本

父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的 height 和 line-height 高度一致來實(shí)現(xiàn)的;

line-height: 顧名思義，行高(行間距)，指在文本中，行與行之間的 基線間的距離 )。

line-height 與 font-size 的計(jì)算值之差，在CSS中成為“行間距”。分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。

這種文字行高與塊高一致帶來了一個(gè)弊端：當(dāng)文字內(nèi)容的長度大于塊的寬時(shí)，就有內(nèi)容脫離了塊。

最后效果見下邊的第一條　1.行高+高度：line-height：Npx(N = 與元素高度相同的值);

(系統(tǒng)筆記之) 父元素高度確定的【多行】文本

父元素高度確定的多行文本、圖片等的豎直居中的方法有兩種：

方法一：使用插入 table (包括tbody、tr、td)標(biāo)簽，同時(shí)設(shè)置 vertical-align：middle。

css 中有一個(gè)用于豎直居中的屬性 vertical-align，在父元素設(shè)置此樣式時(shí)，會(huì)對inline-block類型的子元素都有用。下面看一下例子：

html代碼：

1

2

3

4

看我是否可以居中。p>

5p>

6 tr>table>

7body>

css代碼：

1 table td{height:500px;background:#ccc}

因?yàn)?td 標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(shè)置了 vertical-align 為 middle，所以我們不需要顯式地設(shè)置了。

方法二：設(shè)置塊級元素的 display 為 table-cell(設(shè)置為表格單元顯示)

但這種方法兼容性比較差，只是提供大家學(xué)習(xí)參考。

在 chrome、firefox 及 IE8 以上的瀏覽器下可以設(shè)置塊級元素的 display 為 table-cell(設(shè)置為表格單元顯示)，激活 vertical-align 屬性，

但注意 IE6、7 并不支持這個(gè)樣式, 兼容性比較差。

html

1

2

3

看我是否可以居中。p>

4

看我是否可以居中。p>

5

看我是否可以居中。p>

6p>

7p>

css

1

這種方法的好處是不用添加多余的無意義的標(biāo)簽，但缺點(diǎn)也很明顯，它的兼容性不是很好，不兼容 IE6、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質(zhì)。

2017-04-25 17:53:04

————————————————————————————————————————————————————————————————————————————————————————————————————

其他三點(diǎn)我自己總結(jié)的方法如下：(其中第一條也是父元素高度確定的單行文本的處理方法)

1.行高+高度：line-height：Npx(N = 與元素高度相同的值);

正如N的值那樣，這種解決方法就是要盒模型是有高度設(shè)置的。舉例：

.box {

width: 45px;

height: 60px;

line-height: 60px;

}

高度是60px，行高也設(shè)置為60px，這樣，就可以實(shí)現(xiàn)垂直居中的問題。

如圖：影視二字就可以垂直居中了。

可行性分析：就像圖片中看到的那樣，只有兩個(gè)字，他們排在一行不會(huì)換行，一旦換行的話，行高就會(huì)應(yīng)用于文字，由于行高過大的原因，會(huì)導(dǎo)致剩下的文字跑出畫面了。

如右圖：

2：【父元素高度確定】定位+外邊距：position：absolute;top：50%;margin-top: -Bpx;(B是元素的高度/2的值)

這里就不一定需要盒模型的固定高度了，只需要物體的高度，比如字體。至于怎么獲得字體的高度，就去瀏覽器的調(diào)試工具(Dreamweaver也可以也有這個(gè)功能，實(shí)時(shí)編輯的工具都是可以的。)中看。當(dāng)不設(shè)置高度值得時(shí)候，將鼠標(biāo)移到對應(yīng)的標(biāo)簽上，自然會(huì)有寬高顯示出來。

喏：

這么一看高度就是19px;

所以設(shè)置的話：

.box{

position: absolute;

top: 50%;

margin-top: -10px;

}

可行性分析：絕對定位absolute是一個(gè)魔鬼，不到萬不得已不能碰他。

那么怎么既避免absolute的絕對定位使用，又要實(shí)現(xiàn)想要的布局呢?

3：【父元素高度確定】外邊距+高度：margin-top：50%-Mpx;(M是元素的高度/2的值)

不知道這種寫法，以前也沒有見過。但是正如開篇說的那樣，我從來沒這么想過可以這么玩css，所以很多次我既想要設(shè)置width是100%，又要刨除掉padding、border等的值。你就不知道應(yīng)該是百分幾了!當(dāng)然我后來是用box-sizing解決了，讓padding'等算進(jìn)了總width中，但有時(shí)候涉及到響應(yīng)式的話，還是很麻煩的要弄好多個(gè)@media來限制，動(dòng)輒上30了，那是多么的土且笨的解決啊。直到那么一天，我接受了老師的偶然實(shí)驗(yàn)的想法，讓我眼前一亮，那就是讓css做加減法!

說到讓css自己做加減法，我以前記得看一本書(or文章吧!who care)是有講過css可以做加減法，但我竟然沒想到，讓他做不同單位值得加減法!老師也是一臉興奮的跟我講，我也不知道可以這樣，那天就是試了試，沒想到成功了。哈哈，是啊，偉大而又神奇的css，總是給我們驚喜。這就是我愛它的原因吧。

但我想，直接讓css做加減法既然是可以的，何必還調(diào)用這個(gè)看上去就像個(gè)js函數(shù)一樣的東東呢?畢竟他不是兼容性的。

css直接做加減法的方法雖然直白且低級，但是我們沒有后遺癥啊!(我只是隨便說說，畢竟我沒有測試過!不負(fù)責(zé)任奧!!!233333)

廢話說了這么多，就是一個(gè)核心理念，不管什么單位和數(shù)值了，那么頭疼的響應(yīng)式運(yùn)算，就交給我們的css自動(dòng)運(yùn)算吧。

額(⊙o⊙)…貌似變換成了水平的問題解決。

好，那接下來就是水平：

——————————————————————————————————————————————————

二、水平居中(系統(tǒng)筆記見最后邊)

1：【內(nèi)聯(lián)元素】文本居中：text-align：center(不解釋)

可行性分析：一個(gè)盒子內(nèi)部的文字、元素(有固定寬度)的居中問題他是可以解決的。

那么條件不夠呢?

沒條件就要?jiǎng)?chuàng)造條件嘛!沒有wrap就包一個(gè)嘛!沒有寬度就定下來嘛!別矯情。問題總是可以解決的。

2：【定寬塊元素】自動(dòng)水平外邊距：margin：0 auto;(更加不想解釋)

0：垂直方向margin可變值，表示margin-top、margin-bottom兩個(gè)的值，如果設(shè)置的話，二者一樣。如果不想二者一樣，可以在auto后再設(shè)置一個(gè)：margin: Apx auto Bpx;

auto:水平方向margin，auto就是自動(dòng)，也算是讓css自動(dòng)計(jì)算距離左右的位置吧，

可行性分析：必須要元素定寬，即要設(shè)置寬度值。

3：【需要定寬】絕對定位+外邊距：position：absolute;left：50%;margin-left: -Bpx;(B是元素的寬度/2的值)(更加不想解釋)

有個(gè)盒模型，他有自己的寬度高度、又是絕對定位。這種情況，想讓他水平居中的話用text-align與margin：0 auto;的方法都是不可取的。畢竟absolute已經(jīng)飛起來了，脫離了文檔流，任何限制都對他沒有作用了。但是，好處是不管他以前什么屬性，用了absolute之后就可以設(shè)置寬高。所以就有了解決辦法。

.box{

position: absolute;

top: -15px;

left: 50%;

width: 30px;

height: 30px;