程序開發中的垂直居中實戰教程。

一、垂直居中

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

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

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

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

這種文字行高與塊高一致帶來了一個弊端：當文字內容的長度大于塊的寬時，就有內容脫離了塊。

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

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

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

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

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

html代碼：

1

2

3

4

看我是否可以居中。p>

5p>

6 tr>table>

7body>

css代碼：

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

因為 td 標簽默認情況下就默認設置了 vertical-align 為 middle，所以我們不需要顯式地設置了。

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

但這種方法兼容性比較差，只是提供大家學習參考。

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

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

html

1

2

3

看我是否可以居中。p>

4

看我是否可以居中。p>

5

看我是否可以居中。p>

6p>

7p>

css

1

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

2017-04-25 17:53:04

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

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

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

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

.box {

width: 45px;

height: 60px;

line-height: 60px;

}

高度是60px，行高也設置為60px，這樣，就可以實現垂直居中的問題。

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

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

如右圖：

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

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

喏：

這么一看高度就是19px;

所以設置的話：

.box{

position: absolute;

top: 50%;

margin-top: -10px;

}

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

那么怎么既避免absolute的絕對定位使用，又要實現想要的布局呢?

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

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

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

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

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

廢話說了這么多，就是一個核心理念，不管什么單位和數值了，那么頭疼的響應式運算，就交給我們的css自動運算吧。

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

好，那接下來就是水平：

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

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

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

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

那么條件不夠呢?

沒條件就要創造條件嘛!沒有wrap就包一個嘛!沒有寬度就定下來嘛!別矯情。問題總是可以解決的。

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

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

auto:水平方向margin，auto就是自動，也算是讓css自動計算距離左右的位置吧，

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

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

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

.box{

position: absolute;

top: -15px;

left: 50%;

width: 30px;

height: 30px;