14種CSS實現水平或垂直居中的技巧

前言

<div class< /span>='example example14'>    < span class='code-snippet__tag' ><div class='con'>        超級好用超級放心< code >        <a href ='https://tinypng.com/' target='_blank'>在線壓縮圖片</a> ;        <span< /span>>壓縮完可以</span>      </div></div>< /pre>

只是類名會有所不同。

1、Line-height

適用情景：單行文字（垂直居中）
原理：將單行文字的行高設定後，文字會位於行高的垂直中間位置。
html：

<div class ='example'>Lorem ipsam.</div> 

css：

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

關注下方「前端開發博客」，回复 “加群”
加入我們一起學習，天天進步
如果覺得這篇文章還不錯，來個【分享、點贊、在看】三連吧，讓更多的人也看到~