14種CSS實現(xiàn)水平或垂直居中的技巧
前言
<div class="example example14"><div class="con">超級好用超級放心<a href="https://tinypng.com/" target="_blank">在線壓縮圖片</a><span>壓縮完可以 </span></div></div>
只是類名會有所不同。
1、Line-height
適用情景：單行文字（垂直居中）
原理：將單行文字的行高設(shè)定后，文字會位于行高的垂直中間位置。
html：
<div class="example">Lorem ipsam.</div>
css：
.example{width: 400px;background: #afddf3;line-height: 50px;}
2、Line-height + inline-block
原理：將多個元素或多行元素當(dāng)成一個行元素來看待，所以我們必須要將這些數(shù)據(jù)多包一層，并將其設(shè)定為inline-block。
由于inline-block在不同瀏覽器會有空隙產(chǎn)生，因此設(shè)定父元素font-size：0來消除，從而達到完美的垂直居中。
css：
.example2{width: 400px;border: 1px solid #dcdcdc;line-height: 100px;font-size: 0;}.example2 .con {display: inline-block;line-height: 2;vertical-align: middle;width: 300px;font-size: 15px;background: #afddf3;}
3、:before + inline-block
原理：:before 偽類元素搭配 inline-block 屬性的寫法應(yīng)該是很傳統(tǒng)的垂直居中的技巧了，此方式的好處在于子元素居中可以不需要特別設(shè)定高度。
CSS:
.example3 {margin-top: 10px;width: 400px;height: 150px;font-size: 0;border: 1px solid #dcdcdc;}.example3::before {content: '';display: inline-block;height: 100%;width: 0;vertical-align: middle;}.example .con {width: 300px;font-size: 15px;background: #afddf3;display: inline-block;vertical-align: middle;}
4、table + margin
適用情景：單對象（水平居中）
原理：將子元素設(shè)置塊級表格，再設(shè)置水平居中。
CSS:
.example4 {margin-top: 10px;width: 400px;height: 150px;font-size: 0;border: 1px solid #dcdcdc;}.example .con {display: table;margin: 0 auto;width: 300px;font-size: 15px;background: #afddf3;}
5、table + table-cell + vertical-align: middle
適用情景：多對象（垂直居中）
html:
<div class="example example5"><div class="con">超級好用超級放心<a href="https://tinypng.com/" target="_blank">在線壓縮圖片</a><span>壓縮完可以打包下載哦 </span></div><div class="con">CSS-TRICKS</div></div>
css:
.example5 {display: table;margin-top: 10px;width: 400px;height: 150px;font-size: 0;border: 1px solid #dcdcdc;}.example .con {display: table-cell;vertical-align: middle;width: 300px;font-size: 15px;background: #afddf3;}
6、absolute + margin 負(fù)值
原理：設(shè)置絕對定位，top: 50%;后，再設(shè)置高度一半的負(fù)值實現(xiàn)。說來說去，這就是一道簡單的數(shù)學(xué)題而已。
缺陷：需要設(shè)置居中元素的高度。
優(yōu)勢：無瀏覽器兼容性問題
css:
.example6 {position: relative;margin-top: 10px;width: 400px;height: 150px;font-size: 0;border: 1px solid #dcdcdc;}.example6 .con {position: absolute;top: 50%;height: 80px;margin-top: -40px;width: 300px;font-size: 15px;background: #afddf3;}
7、absolute + margin auto
原理：當(dāng)元素設(shè)置為絕對定位后，假設(shè)它是抓不到整體可運用的空間范圍，所以margin: auto會失效，但當(dāng)你設(shè)置了top:0;bottom:0;時，絕對定位元素就抓到了可運用的空間了，這時你的margin:auto就生效了。
缺陷：定位元素必須有固定的寬高（百分比也算）。
css:
.example7 {position: relative;margin-top: 10px;width: 400px;height: 150px;font-size: 0;border: 1px solid #dcdcdc;}.example7 .con {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 80px;width: 300px;font-size: 15px;background: #afddf3;}
8、absolute + translate
原理：利用絕對定位時的top 與right設(shè)置元素的上方跟左方各為50%，再利用transform: translate(-50%, -50%);位移居中元素自身寬與高的50%就能達成居中的目的了。
缺陷：translate是css3屬性，低版本瀏覽器不支持。
顯著優(yōu)勢：無需固定定位元素的寬高。
css:
.example8 {position: relative;margin-top: 10px;width: 400px;height: 150px;font-size: 0;border: 1px solid #dcdcdc;}.example8 .con {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);font-size: 15px;background: #afddf3;}
9、Flex + align-items
適用情景：多行文字（垂直居中）
原理：彈性布局，align-items定義flex子項在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對齊方式，參考CSS-TRICKS。
缺陷：css3屬性，低版本瀏覽器不支持。
顯著優(yōu)勢：無需固定定位元素的寬高，代碼干凈利索。
css:
.example9 {display: flex;align-items: center;margin-top: 10px;width: 400px;height: 150px;font-size: 0;border: 1px solid #dcdcdc;}.example9 .con {font-size: 15px;background: #afddf3;}
10、Flex + justify-content
適用情景：多行文字（水平居中）
原理：彈性布局，justify-content設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式，參考CSS-TRICKS。
缺陷：css3屬性，低版本瀏覽器不支持。
顯著優(yōu)勢：無需固定定位元素的寬高，代碼干凈利索。
css:
.example10 {display: flex;justify-content: center;margin-top: 10px;width: 400px;height: 150px;font-size: 0;border: 1px solid #dcdcdc;}.example .con {height: 80px;font-size: 15px;background: #afddf3;}
11、Flex + :before + flex-grow
適用情景：多行文字（垂直居中）
原理：彈性布局，F(xiàn)lex-direction：column;將項目垂直顯示，正如一個列一樣。flex-grow: [number];規(guī)定項目將相對于其他靈活的項目進行擴展的量，參考CSS-TRICKS。
缺陷：css3屬性，低版本瀏覽器不支持，并且難度稍大，一般不會想到這種方法。
顯著優(yōu)勢：無需固定定位元素的寬高
css:
.example11 {display: flex;flex-direction: column;margin-top: 10px;width: 400px;height: 150px;font-size: 0;border: 1px solid #dcdcdc;}.example11:before {content: '';flex-grow: .5;}.example11 .con {font-size: 15px;background: #afddf3;}
12、Flex + margin
缺陷：css3屬性，低版本瀏覽器不支持。
css:
.example12 {display: flex;margin-top: 10px;width: 400px;height: 150px;font-size: 0;border: 1px solid #dcdcdc;}.example12 .con {margin: auto;width: 300px;font-size: 15px;background: #afddf3;}
13、Flex + align-self
原理：align-self定義flex子項單獨在側(cè)軸（縱軸）方向上的對齊方式。
缺陷：css3屬性，低版本瀏覽器不支持。
css:
.example13 {display: flex;justify-content: center;margin-top: 10px;width: 400px;height: 150px;font-size: 0;border: 1px solid #dcdcdc;}.example13 .con {align-self: center;width: 300px;font-size: 15px;background: #afddf3;}
14、Flex + align-content
原理：align-content在彈性容器內(nèi)的各項沒有占用交叉軸上所有可用的空間時對齊容器內(nèi)的各項（垂直），彈性項目有多項此屬性才會發(fā)揮作用。
缺陷：css3屬性，低版本瀏覽器不支持。
css:
.example14 {display: flex;align-content: center;flex-wrap: wrap;margin-top: 10px;width: 400px;height: 150px;font-size: 0;border: 1px solid #dcdcdc;}.example14:before, .example14:after {content: "";display: block;width: 100%;}.example14 .con {height: 80px;width: 300px;font-size: 15px;background: #afddf3;}
下面是一個比較常見的例子,往往是不想讓圖片發(fā)生變形并且不管尺寸大小均會顯示在容器的正中央（以下例子應(yīng)用的是第8條）。
html:
<div class="imgbox-box"><div class="imgbox"><img src="imgs/head.jpeg" alt=""></div><div class="imgbox"><img src="imgs/head.jpeg" alt=""></div><div class="imgbox"><img src="imgs/head.jpeg" alt=""></div></div>
css:
.imgbox-box {display: flex;justify-content: center;margin-bottom: 40px;}.imgbox {width: 200px;height: 200px;position: relative;background: #ebf8ed;overflow: hidden;}.imgbox img {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);max-width: 100%;max-height: 100%;}
結(jié)語
有些是水平居中，有些是垂直居中，將它們某兩個合在一起就能實現(xiàn)水平和垂直均居中。
感謝你的閱讀，希望這些小技巧對你有用。