CSS 居中方法集锦
CSS 居中方法集錦
記錄收集純CSS層面實(shí)現(xiàn)的水平、垂直居中方法可用于塊級(jí)、行內(nèi)快、內(nèi)聯(lián)元素以及文字圖片等。
1.1 text-align
1.2 margin
1.3 line-height
1.4 padding
2.1 擋板方式實(shí)現(xiàn)的水平垂直居中
2.2 vertical-align
2.3 模擬單元格特性
2.4 position + margin:負(fù)值
2.5 position + margin:auto
2.6 position + translate
2.7 position + calc
2.8 相對(duì)于viewport進(jìn)行水平垂直居中
2.9 css3 - flex
3.1 背景圖方式
3.2 CSS 表達(dá)式
3.3 button 方式
3.4 網(wǎng)易NEC - 適合圖片的方式
1. 水平或垂直居中
1.1 text-align
對(duì)于要求不高，并且內(nèi)容是文本元素或是行內(nèi)塊元素(inline-block)，可以很容易的通過text-align:center進(jìn)行水平居中。
示例：
1.2 margin
對(duì)于內(nèi)容是塊級(jí)元素,通過?margin:0px auto?可以很容易的進(jìn)行水平居中。
示例：
1.3 line-height
對(duì)于內(nèi)容是純文本或者是行內(nèi)快元素時(shí)，最簡(jiǎn)單的就是通過設(shè)置?line-height?實(shí)現(xiàn)垂直居中，不過這種方式有很大的不足之處，一是行高的值必須為當(dāng)前父元素的高度，二是，只能一行，不能有多行。
1.4 padding
如果父元素對(duì)于高度沒有什么要求，可以通過設(shè)置?padding-top?與?padding-bottom?為相同值，來實(shí)現(xiàn)偽的垂直居中效果。
示例：
2. 水平與垂直同時(shí)居中
2.1 擋板方式實(shí)現(xiàn)的水平垂直居中
我稱這種方式為擋板方式，是因?yàn)樗趯?shí)現(xiàn)方式上很類似。
示例：
Note：?但在實(shí)際的使用上如果不考慮IE7-，那個(gè)無用的元素可以使用偽類替代。
2.2 vertical-align
vertial-align?是CSS的一個(gè)屬性，該屬性只對(duì)行內(nèi)元素或行內(nèi)快元素產(chǎn)生作用，主要用于設(shè)置當(dāng)前元素與同級(jí)相鄰元素的垂直對(duì)齊方式(基于基線)。常用于圖片與文字的對(duì)齊。
這里則是利用?vertical-align?這種對(duì)齊 的特性來在父元素中插入一個(gè)高度與其相同的子元素，最后再為該子元素設(shè)置?vertical-align?屬性來對(duì)齊我們真正的內(nèi)容。
這種方式還是蠻巧妙的，但是我認(rèn)為其局限性在于只能作用于行內(nèi)或行內(nèi)快，另外要插入一個(gè)無關(guān)的廢標(biāo)簽，不過該標(biāo)簽可以通過偽類進(jìn)行代替。
最將?text-align:center?與?vertical-align:middle，結(jié)合使用，我們便可以將行內(nèi)快元素水平垂直居中
示例：
2.3 模擬單元格特性
我們知道表格有很多特性，比如寬度的關(guān)聯(lián)伸縮，再比如我們現(xiàn)在需要用到的垂直居中，而正好的是CSS也可以通過display屬性為HTML元素賦予表格元素的特性。
常見的有：
display:table?聲明一個(gè)表格
display:table-row?聲明一個(gè)行
display:table-cell?聲明一個(gè)單元格。
簡(jiǎn)單的使用示例（快速入門）：
<html lang="en"><head><meta charset="UTF-8"><style>.table{display:table;border:1px solid #ccc;}.row{display:table-row;}.cell{display:table-cell;border:1px solid #ccc;}</style></head><body><div class="table"><div class="row"><div class="cell">ROW1-CELL1</div><div class="cell">ROW1-CELL2</div></div> <div class="row"><div class="cell">ROW2-CELL1</div><div class="cell">ROW2-CELL2</div></div></div></body></html>因此利用這種手段，我們也可以實(shí)現(xiàn)需要的水平垂直居中效果。
<html lang="en"> <head><meta charset="UTF-8"><style>.box{display:table-cell;width:500px;height:500px;background:#eee;vertical-align:middle;text-align: center;}p{display:inline-block;background:#aaa;}</style> </head> <body><div class="box"><p>TABLE-CELL-TEST<br/>TABLE-CELL-TEST<br/>TABLE-CELL-TEST<br/></p></div> </body> </html>通過模擬表格的方其優(yōu)點(diǎn)在于可以垂直居中多行內(nèi)容，但是缺點(diǎn)就是目前只有IE8+的版本才被支持。
2.4 position + margin:負(fù)值
通過定位可以實(shí)現(xiàn)水平垂直居中，不過對(duì)使用的條件要求較高，首先內(nèi)容要進(jìn)行絕對(duì)定位(absolute)，父元素要進(jìn)行相對(duì)定位(relative)，其次內(nèi)容要有固定的尺寸，最后調(diào)整margin負(fù)值與偏移屬性的值。
示例：
2.5 position + margin:auto
對(duì)于絕對(duì)定位的元素來說,其默認(rèn)效果是：
- 尺寸會(huì)自動(dòng)收縮適應(yīng)內(nèi)容。
- 位置默認(rèn)的是auto，
- 邊距則默認(rèn)值為0。
此時(shí)如果在默認(rèn)尺寸的情況下，我們將其四個(gè)方向的偏移值都設(shè)置為0的話，元素會(huì)自動(dòng)向四個(gè)方向拉伸100%貼合其參照元素。如果再設(shè)置固定寬度，并設(shè)置?margin:auto,那么便可以驚奇的發(fā)現(xiàn)，絕對(duì)定位的元素會(huì)水平垂直居中在父元素（參照元素）中。
關(guān)于 margin:auto為什么能水平居中塊級(jí)而不能垂直居中的問題
auto是自動(dòng)分配的意思，margin:auto,便是自動(dòng)分配邊距的意思。但是根據(jù)CSS2.1的規(guī)范，塊級(jí)元素的寬度是參照其父元素的寬度（也就是為什么塊級(jí)元素獨(dú)占一行的原因），只有寬度是100%，auto才能夠進(jìn)行分配，然后讓元素水平居中，但是問題來了，CSS規(guī)范同時(shí)也定義了塊級(jí)元素的高度是根據(jù)內(nèi)容適應(yīng)，也就是說塊級(jí)元素的高度是不可知的，所以為上下邊距設(shè)置auto當(dāng)然不能進(jìn)行垂直居中。然而當(dāng)我們給一個(gè)元素進(jìn)行定位，使其成為塊級(jí)元素并脫離文檔流時(shí)，又同時(shí)為其設(shè)置top:0;right:0;bottom:0;left:0，便會(huì)將該元素的尺寸完全貼合其父元素或參照元素，即width:100%,height:100%,那么此時(shí)再設(shè)置margin:auto,便可以進(jìn)行水平/垂直居中。
示例：
<html lang="en"> <head><meta charset="UTF-8"><style>.box{position:relative;width:600px;height:600px;background:#aaa;}p{position:absolute;width:200px;height:200px;left:0;right:0;bottom:0;top:0;margin:auto;background:#eee;}</style> </head> <body><div class="box"><p>This is Position Advace</p></div> </body> </html>2.6 position + translate
通過CSS3的?translate?實(shí)現(xiàn)的水平垂直居中，其原理與position+margin負(fù)值的方式很類似。
但是相比于margin負(fù)值方式，其優(yōu)點(diǎn)體現(xiàn)于：
- 不需要為內(nèi)容設(shè)置固定的寬度。
- 不需要手動(dòng)計(jì)算負(fù)邊距值。
transform:translate(-50%,-50%)?可以自動(dòng)向左與向上移動(dòng)當(dāng)前元素寬度的50%。
示例：
2.7 position + calc
calc()?是CSS3的函數(shù)屬性，其功能是進(jìn)行四則運(yùn)算，參與運(yùn)算的值可以是相對(duì)單位，也可以是絕對(duì)單位。
利用calc進(jìn)行居中的原理其實(shí)就是通過為left:50%,top:50%,然后讓50%再減去當(dāng)前元素寬度或者高度的一半，其機(jī)制仍然屬于負(fù)邊距方式，但相比于position的負(fù)邊距以及于translate等方式，它主要減少了樣式的聲明數(shù)量。
示例：
2.8 相對(duì)于viewport進(jìn)行水平垂直居中
CSS3中引入了新的度量單位，vh 與 vw，它們都是基于viewport的相對(duì)單位，即viewport的寬度與高度分別被分為100等份的vh 與 vw。
也就是說：
1vh = 1%(viewport的高度)
1vw = 1%(viewport的寬度)
那么為當(dāng)前元素的尺寸設(shè)置為 50vh與50vw 即當(dāng)前窗口的高度與寬度的一半，再結(jié)合?translate(50%,50%)便可以將當(dāng)前元素水平垂直居中在當(dāng)前窗口中。
2.9 css3 - flex
flex可謂是CSS3加入的強(qiáng)大布局特性，利用flex我們可以實(shí)現(xiàn)靈活方便且可塑的布局方案。
利用flex布局只需要簡(jiǎn)單的設(shè)置兩行樣式聲明即可實(shí)現(xiàn)元素的水平與垂直居中。
justify-content:center?水平居中排列
align-items:center?垂直居中排列
示例：
3 圖片相關(guān)的水平垂直居中
專門用于圖片水平垂直居中的CSS方法，并且以下方法都可以在所有瀏覽器中得到兼容。
3.1 背景圖方式
這種方式最簡(jiǎn)單，就是將圖片作為背景圖，然后設(shè)置?background-position:center center?讓其水平垂直居中在元素中。
3.2 CSS 表達(dá)式
這種方式要借助IE的私有擴(kuò)展，并且這種方式的好處是可以兼容到IE5。
缺點(diǎn)也很明顯，就是只能用于圖片，因?yàn)檫@涉及到CSS表達(dá)式中的?this.height。
3.3 button 方式
這種方式有些過濾奇技淫巧，但是好處就是可以兼容所有瀏覽器，但是在IE瀏覽器中會(huì)有稍微的瑕疵，也就是當(dāng)單擊的時(shí)候，圖片會(huì)有輕微的晃動(dòng)。
<html lang="en"> <head><meta charset="UTF-8"><style>button{height:500px;width:500px;background:#eee;border:none;outline:none;}</style> </head> <body><button><img src="http://nec.netease.com/img/s/1.jpg" alt="" /></button> </body> </html>3.4 網(wǎng)易NEC - 很適合圖片的方法
這種網(wǎng)易NEC發(fā)明的方式，其優(yōu)點(diǎn)在于只要圖片的尺寸不超過父元素，圖片都會(huì)在父元素中居中。
原理：
首先為外層盒子進(jìn)行相對(duì)定位，然后為內(nèi)部盒子進(jìn)行絕對(duì)定位，并且尺寸是由其內(nèi)容（圖片）撐開，再為內(nèi)部盒子設(shè)置偏移值 left:50%;top:50%;最后再將其內(nèi)部放入兩個(gè)img標(biāo)簽，但引用的都是一張圖片，其中一張圖片進(jìn)行占位隱藏用于讓內(nèi)部盒子識(shí)別尺寸，另一張圖片則是用來顯示，并且這張圖片再進(jìn)行絕對(duì)定位，然后left:-50%;top:-50%，這樣便可以將圖片水平、垂直居中在父元素中。
示例：
<html lang="en"> <head><meta charset="UTF-8"><style type="text/css">.box {position:relative;width: 600px;height: 600px;background:#eee;}.inner{position:absolute;left:50%;top:50%;}.inner .img1{visibility: hidden;}.inner .img2{position:absolute;left:-50%;top:-50%;}</style> </head> <body><div class="box"><div class="inner"><img class="img1" src="http://nec.netease.com/img/s/1.jpg" /><img class="img2" src="http://nec.netease.com/img/s/1.jpg" /></div></div> </body> </html>總結(jié)
以上是生活随笔為你收集整理的CSS 居中方法集锦的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 科大讯飞又搞黑科技专利：用户可在输入法中
- 下一篇： CSS 基本样式