CSS 居中方法集锦
CSS 居中方法集錦
記錄收集純CSS層面實現的水平、垂直居中方法可用于塊級、行內快、內聯元素以及文字圖片等。
1.1 text-align
1.2 margin
1.3 line-height
1.4 padding
2.1 擋板方式實現的水平垂直居中
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 網易NEC - 適合圖片的方式
1. 水平或垂直居中
1.1 text-align
對于要求不高，并且內容是文本元素或是行內塊元素(inline-block)，可以很容易的通過text-align:center進行水平居中。
示例：
1.2 margin
對于內容是塊級元素,通過?margin:0px auto?可以很容易的進行水平居中。
示例：
1.3 line-height
對于內容是純文本或者是行內快元素時，最簡單的就是通過設置?line-height?實現垂直居中，不過這種方式有很大的不足之處，一是行高的值必須為當前父元素的高度，二是，只能一行，不能有多行。
1.4 padding
如果父元素對于高度沒有什么要求，可以通過設置?padding-top?與?padding-bottom?為相同值，來實現偽的垂直居中效果。
示例：
2. 水平與垂直同時居中
2.1 擋板方式實現的水平垂直居中
我稱這種方式為擋板方式，是因為它在實現方式上很類似。
示例：
Note：?但在實際的使用上如果不考慮IE7-，那個無用的元素可以使用偽類替代。
2.2 vertical-align
vertial-align?是CSS的一個屬性，該屬性只對行內元素或行內快元素產生作用，主要用于設置當前元素與同級相鄰元素的垂直對齊方式(基于基線)。常用于圖片與文字的對齊。
這里則是利用?vertical-align?這種對齊 的特性來在父元素中插入一個高度與其相同的子元素，最后再為該子元素設置?vertical-align?屬性來對齊我們真正的內容。
這種方式還是蠻巧妙的，但是我認為其局限性在于只能作用于行內或行內快，另外要插入一個無關的廢標簽，不過該標簽可以通過偽類進行代替。
最將?text-align:center?與?vertical-align:middle，結合使用，我們便可以將行內快元素水平垂直居中
示例：
2.3 模擬單元格特性
我們知道表格有很多特性，比如寬度的關聯伸縮，再比如我們現在需要用到的垂直居中，而正好的是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>因此利用這種手段，我們也可以實現需要的水平垂直居中效果。
<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>通過模擬表格的方其優點在于可以垂直居中多行內容，但是缺點就是目前只有IE8+的版本才被支持。
2.4 position + margin:負值
通過定位可以實現水平垂直居中，不過對使用的條件要求較高，首先內容要進行絕對定位(absolute)，父元素要進行相對定位(relative)，其次內容要有固定的尺寸，最后調整margin負值與偏移屬性的值。
示例：
2.5 position + margin:auto
對于絕對定位的元素來說,其默認效果是：
- 尺寸會自動收縮適應內容。
- 位置默認的是auto，
- 邊距則默認值為0。
此時如果在默認尺寸的情況下，我們將其四個方向的偏移值都設置為0的話，元素會自動向四個方向拉伸100%貼合其參照元素。如果再設置固定寬度，并設置?margin:auto,那么便可以驚奇的發現，絕對定位的元素會水平垂直居中在父元素（參照元素）中。
關于 margin:auto為什么能水平居中塊級而不能垂直居中的問題
auto是自動分配的意思，margin:auto,便是自動分配邊距的意思。但是根據CSS2.1的規范，塊級元素的寬度是參照其父元素的寬度（也就是為什么塊級元素獨占一行的原因），只有寬度是100%，auto才能夠進行分配，然后讓元素水平居中，但是問題來了，CSS規范同時也定義了塊級元素的高度是根據內容適應，也就是說塊級元素的高度是不可知的，所以為上下邊距設置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?實現的水平垂直居中，其原理與position+margin負值的方式很類似。
但是相比于margin負值方式，其優點體現于：
- 不需要為內容設置固定的寬度。
- 不需要手動計算負邊距值。
transform:translate(-50%,-50%)?可以自動向左與向上移動當前元素寬度的50%。
示例：
2.7 position + calc
calc()?是CSS3的函數屬性，其功能是進行四則運算，參與運算的值可以是相對單位，也可以是絕對單位。
利用calc進行居中的原理其實就是通過為left:50%,top:50%,然后讓50%再減去當前元素寬度或者高度的一半，其機制仍然屬于負邊距方式，但相比于position的負邊距以及于translate等方式，它主要減少了樣式的聲明數量。
示例：
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我們可以實現靈活方便且可塑的布局方案。
利用flex布局只需要簡單的設置兩行樣式聲明即可實現元素的水平與垂直居中。
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 網易NEC - 很適合圖片的方法
這種網易NEC發明的方式，其優點在于只要圖片的尺寸不超過父元素，圖片都會在父元素中居中。
原理：
首先為外層盒子進行相對定位，然后為內部盒子進行絕對定位，并且尺寸是由其內容（圖片）撐開，再為內部盒子設置偏移值 left:50%;top:50%;最后再將其內部放入兩個img標簽，但引用的都是一張圖片，其中一張圖片進行占位隱藏用于讓內部盒子識別尺寸，另一張圖片則是用來顯示，并且這張圖片再進行絕對定位，然后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 居中方法集锦的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 科大讯飞又搞黑科技专利：用户可在输入法中
- 下一篇： [CSS]详解display:inlin