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