CSS-垂直|水平居中问题的解决方法总结
題外話：前兩天和專業(yè)老師探討最近的一個項目，涉及到對一個浮動的盒子局中的問題，老師的解決方法打開了我的新思路。讓我有了總結一下平時的居中問題的想法。不然可能忘掉了以后又要到處尋找解決辦法了。另外也給我一個啟示：啟示解決方法有很多，就看你能不能對知識靈活運用。也是通過這件事我體會到了“靈活運用”的真正含義。做事情是這樣，做技術尤其要這樣。
這個總結要一直在整理完善中，以后有了什么新的想法、新的解決辦法都要再修改。可惜不在github中，不然可以集思廣益了。
———————————————--------------—開始-分割線—-----------------———————————————
一、垂直居中
（系統(tǒng)筆記之） 父元素高度確定的【單行】文本
父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的?height?和 line-height 高度一致來實現(xiàn)的；
line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的?基線間的距離?)。
line-height 與 font-size 的計算值之差，在 CSS 中成為“行間距”。分為兩半，分別加到一個文本行內容的頂部和底部。
這種文字行高與塊高一致帶來了一個弊端：當文字內容的長度大于塊的寬時，就有內容脫離了塊。
最后效果見下邊的第一條 1.行高+高度：line-height：Npx（N = 與元素高度相同的值）；
?
（系統(tǒng)筆記之） 父元素高度確定的【多行】文本
?
父元素高度確定的多行文本、圖片等的豎直居中的方法有兩種：
?
方法一：使用插入 table （包括tbody、tr、td）標簽，同時設置 vertical-align：middle。
?
css 中有一個用于豎直居中的屬性 vertical-align，在父元素設置此樣式時，會對inline-block類型的子元素都有用。下面看一下例子：
html代碼：
1 <body> 2 <table><tbody><tr><td class="wrap"> 3 <div> 4 <p>看我是否可以居中。</p> 5 </div> 6 </td></tr></tbody></table> 7 </body>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 <div class="container"> 2 <div> 3 <p>看我是否可以居中。</p> 4 <p>看我是否可以居中。</p> 5 <p>看我是否可以居中。</p> 6 </div> 7 </div>css
1 <style> 2 .container{ 3 height:300px; 4 background:#ccc; 5 display:table-cell;/*IE8以上及Chrome、Firefox*/ 6 vertical-align:middle;/*IE8以上及Chrome、Firefox*/ 7 } 8 </style>這種方法的好處是不用添加多余的無意義的標簽，但缺點也很明顯，它的兼容性不是很好，不兼容 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，這樣，就可以實現(xiàn)垂直居中的問題。
如圖：。影視二字就可以垂直居中了。
可行性分析：就像圖片中看到的那樣，只有兩個字，他們排在一行不會換行，一旦換行的話，行高就會應用于文字，由于行高過大的原因，會導致剩下的文字跑出畫面了。
如右圖：
2：【父元素高度確定】定位+外邊距：position：absolute；top：50%；margin-top: -Bpx;(B是元素的高度/2的值)
這里就不一定需要盒模型的固定高度了，只需要物體的高度，比如字體。至于怎么獲得字體的高度，就去瀏覽器的調試工具（Dreamweaver也可以也有這個功能，實時編輯的工具都是可以的。）中看。當不設置高度值得時候，將鼠標移到對應的標簽上，自然會有寬高顯示出來。
喏：。這么一看高度就是19px；
所以設置的話：
.box{ position: absolute;top: 50%;margin-top: -10px; }可行性分析：絕對定位absolute是一個魔鬼，不到萬不得已不能碰他。
那么怎么既避免absolute的絕對定位使用，又要實現(xiàn)想要的布局呢？
?
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，總是給我們驚喜。這就是我愛它的原因吧。
可能你現(xiàn)在會想到或已經(jīng)知道有一個css屬性可以做計算，沒錯！就是calc().
這個屬性我看過一片前輩大神的博客，用法講的很詳細，鏈接貼在這里了：http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html
但我想，直接讓css做加減法既然是可以的，何必還調用這個看上去就像個js函數(shù)一樣的東東呢？畢竟他不是兼容性的。
css直接做加減法的方法雖然直白且低級，但是我們沒有后遺癥啊！（我只是隨便說說，畢竟我沒有測試過！不負責任奧！！！233333）
?
廢話說了這么多，就是一個核心理念，不管什么單位和數(shù)值了，那么頭疼的響應式運算，就交給我們的css自動運算吧。
額(⊙o⊙)…貌似變換成了水平的問題解決。
好，那接下來就是水平：
——————————————————————————————————————————————————
二、水平居中（系統(tǒng)筆記見最后邊）
?
1：【內聯(lián)元素】文本居中：text-align：center（不解釋）
可行性分析：一個盒子內部的文字、元素（有固定寬度）的居中問題他是可以解決的。
那么條件不夠呢？
沒條件就要創(chuàng)造條件嘛！沒有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已經(jīng)飛起來了，脫離了文檔流，任何限制都對他沒有作用了。但是，好處是不管他以前什么屬性，用了absolute之后就可以設置寬高了。所以就有了解決辦法。
.box{position: absolute;top: -15px;left: 50%;width: 30px;height: 30px;margin-left: -15px; }?
可行性分析：不到玩不得已別碰absolute，畢竟他生來不是為了布局的。
?
?4：margin-left: 50% - ?Wpx;(W = Width/2的值)（猜測階段，未實驗證實）
?
但是
?就像可以
{
width：100% - 40px;
}
?這么寫一樣，沒有什么不可能，只有你想不到，沒有css做不到。
-------------------------------------————————————————結——————————————————---------------------------------
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>測試</title> 6 <meta name="author" content="郭菊鋒,tel-15127145529,qq-702004176"> 7 </head> 8 <body> 9 </body> 10 </html> View Code2016-12-18 ?15:07:04
-------------------------------------————————————————接——————————————————---------------------------------?
2017-04-25 ?17:24:39
不定寬度的塊狀元素有三種方法居中（慕課）
1.table
2.display： inline;
3: position: relative;和 left: 50%;
第一種方法：利用table標簽的長度自適應性---
即不定義其長度也不默認父元素body的長度（table其長度根據(jù)其內文本長度決定），因此可以看做一個定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。
?
第一步：為需要設置的居中的元素外面加入一個 table 標簽 ( 包括 <tbody>、<tr>、<td>?)。
?
第二步：為這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。
?
html代碼
?
1 <div> 2 <table> 3 <tbody> 4 <tr><td> 5 <ul> 6 <li>我是第一行文本</li> 7 <li>我是第二行文本</li> 8 <li>我是第三行文本</li> 9 </ul> 10 </td></tr> 11 </tbody> 12 </table> 13 </div>?
css代碼
1 <style> 2 table{ 3 border:1px solid; 4 margin:0 auto; 5 } 6 </style>?
?
第二種方法：改變元素的display類型為行內元素，
利用其屬性直接設置。改變塊級元素的 display 為 inline 類型（設置為 行內元素 顯示），然后使用 text-align:center 來實現(xiàn)居中效果。
?
這種方法相比第一種方法的優(yōu)勢是不用增加無語義標簽，
?
但也存在著一些問題：它將塊狀元素的 display 類型改為 inline，變成了行內元素，
?
所以少了一些功能，比如設定長度值。
?
html代碼
?
1 <body> 2 <div class="container"> 3 <ul> 4 <li><a href="#">1</a></li> 5 <li><a href="#">2</a></li> 6 <li><a href="#">3</a></li> 7 </ul> 8 </div> 9 </body>?
css代碼
1 <style> 2 .container{ 3 text-align:center; 4 } 5 /* margin:0;padding:0（消除文本與div邊框之間的間隙）*/ 6 .container ul{ 7 list-style:none; 8 margin:0; 9 padding:0; 10 display:inline; 11 } 12 /* margin-right:8px（設置li文本之間的間隔）*/ 13 .container li{ 14 margin-right:8px; 15 display:inline; 16 } 17 </style>?
?
第三種方法;設置浮動和相對定位來實現(xiàn)
既通過給父元素設置 float，然后給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:?-50% 來實現(xiàn)水平居中。
我們可以這樣理解：
假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，
ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；
而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現(xiàn)li層的居中。
html代碼
?
1 <body> 2 <div class="container"> 3 <ul> 4 <li><a href="#">1</a></li> 5 <li><a href="#">2</a></li> 6 <li><a href="#">3</a></li> 7 </ul> 8 </div> 9 </body>?
css
1 <style> 2 .container{ 3 float:left; 4 position:relative; 5 left:50% 6 } 7 8 .container ul{ 9 list-style:none; 10 margin:0; 11 padding:0; 12 13 position:relative; 14 left:-50%; 15 } 16 .container li{float:left;display:inline;margin-right:8px;} 17 </style>小程序中的垂直居中
?最近做小程序遇到一種垂直居中的問題，摸索到了解決辦法?
2017-08-10 ?11:56:57
html
1 <view class="article-title"> 2 <text class="article-title-cont">這里是這個故事的總標題，左邊照片也可以沒有 </text> 3 </view>?
css
.article-title {float: left;font-size: 28rpx;width: 372rpx;height: 85rpx;line-height: 85rpx;margin-left: 10px;padding: 5px 0;overflow: hidden; } .article-title-cont{line-height: 21px;display: inline-block; } css關鍵點是：我給了text一個inline-block；因為之前他是inline模式，給了他爸爸一個line-height=height，對他是起作用的，
但是他也繼承爸爸的line-height，導致里邊的文字換行后就超出爸爸、被爸爸隱藏功能干掉。
我就給他一個小的line-hiehgt來覆蓋繼承自爸爸的行高，但是他是內聯(lián)元素不起作用，換成塊元素又不受爸爸杭高的影響，
所以就有了咱們萬能的inline-block內聯(lián)塊元素的閃亮登場了
總結3點：父元素行高設置成高度大小、子元素給inline-block設置、并覆蓋父親的行高成正常大小。
總結
以上是生活随笔為你收集整理的CSS-垂直|水平居中问题的解决方法总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何实现两列等高效果？
- 下一篇： 那些相似的CRM之间究竟有无区别