CSS 居中方法集錦_第1頁
CSS 居中方法集錦_第2頁
CSS 居中方法集錦_第3頁
CSS 居中方法集錦_第4頁
CSS 居中方法集錦_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、CSS 居中方法集錦記錄收集純CSS層面實(shí)現(xiàn)的水平、垂直居中方法可用于塊級、行內(nèi)快、內(nèi)聯(lián)元素以及文字圖片等。水平或垂直居中 1.1 text-align1.2 margin1.3 line-height1.4 padding水平與垂直同時居中2.1 擋板方式實(shí)現(xiàn)的水平垂直居中2.2 vertical-align2.3 模擬單元格特性2.4 position + margin:負(fù)值2.5 position + margin:auto2.6 position + translate2.7 position + calc2.8 相對于viewport進(jìn)行水平垂直居中2.9 css3 - flex圖片

2、相關(guān)的水平垂直居中3.1 背景圖方式3.2 CSS 表達(dá)式3.3 button 方式3.4 網(wǎng)易NEC - 適合圖片的方式1. 水平或垂直居中1.1 text-align對于要求不高，并且內(nèi)容是文本元素或是行內(nèi)塊元素(inline-block)，可以很容易的通過text-align:center進(jìn)行水平居中。示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div background:#eee; te

3、xt-align: center; span display:inline-block; background:#aaa; width: 200px; </style></head><body> <div> 使用text-align:center進(jìn)行水平居中<br/> <span>inline-block</span> </div></body></html>1.2 margin對于內(nèi)容是塊級元素,通過 margin:0px auto 可以很容易的進(jìn)行水平居中。示例：<

4、!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div background:#eee; text-align: center; p background:#aaa; width:500px; line-height:100px; margin:0px auto; </style></head><body> <div> <p>MARGIN:0PX AUTO

5、</p> </div></body></html>優(yōu)點(diǎn)缺點(diǎn)簡單直觀被水平居中的元素必須要有固定的寬度1.3 line-height對于內(nèi)容是純文本或者是行內(nèi)快元素時，最簡單的就是通過設(shè)置 line-height 實(shí)現(xiàn)垂直居中，不過這種方式有很大的不足之處，一是行高的值必須為當(dāng)前父元素的高度，二是，只能一行，不能有多行。優(yōu)點(diǎn)缺點(diǎn)簡單直觀只能作用于內(nèi)聯(lián)元素或行內(nèi)塊、只能一行不能多行、行高的值必須為父元素的高度1.4 padding如果父元素對于高度沒有什么要求，可以通過設(shè)置 padding-top 與 padding-bottom 為相同值，來實(shí)現(xiàn)偽

6、的垂直居中效果。示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div padding:200px 0; background:#eee; text-align: center; p background:#aaa; </style></head><body> <div> <p>PADDING</p> </div>&l

7、t;/body></html>優(yōu)點(diǎn)缺點(diǎn)非常簡單進(jìn)行偽垂直居中的元素不能有高度2. 水平與垂直同時居中2.1 擋板方式實(shí)現(xiàn)的水平垂直居中我稱這種方式為擋板方式，是因?yàn)樗趯?shí)現(xiàn)方式上很類似。示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box width:600px; height:600px; backgrou

8、nd:#eee; .top height:50%; .box1 width:200px; height:200px; background:#aaa; margin:0px auto; margin-top:-100px; </style></head><body> <div class="box"> <div class="top"></div> <div class="box1"></div> </div></body

9、></html>優(yōu)點(diǎn)缺點(diǎn)不需要定位依然需要計算與設(shè)置負(fù)邊距值要引入一個廢標(biāo)簽Note： 但在實(shí)際的使用上如果不考慮IE7-，那個無用的元素可以使用偽類替代。2.2 vertical-alignvertial-align 是CSS的一個屬性，該屬性只對行內(nèi)元素或行內(nèi)快元素產(chǎn)生作用，主要用于設(shè)置當(dāng)前元素與同級相鄰元素的垂直對齊方式(基于基線)。常用于圖片與文字的對齊。這里則是利用 vertical-align 這種對齊 的特性來在父元素中插入一個高度與其相同的子元素，最后再為該子元素設(shè)置 vertical-align 屬性來對齊我們真正的內(nèi)容。這種方式還是蠻巧妙的，但是我認(rèn)為其局

10、限性在于只能作用于行內(nèi)或行內(nèi)快，另外要插入一個無關(guān)的廢標(biāo)簽，不過該標(biāo)簽可以通過偽類進(jìn)行代替。最將 text-align:center 與 vertical-align:middle，結(jié)合使用，我們便可以將行內(nèi)快元素水平垂直居中示例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div width:300px; height:200px; text-align:center; background:#e

11、ee; text-align:center; div:after content:'' display:inline-block; width: 1px; height:100%; vertical-align:middle; </style> </head> <body> <div> <button>button1</button> <button>button2</button> </div> </body> </html>2.3 模擬單元格特

12、性我們知道表格有很多特性，比如寬度的關(guān)聯(lián)伸縮，再比如我們現(xiàn)在需要用到的垂直居中，而正好的是CSS也可以通過display屬性為HTML元素賦予表格元素的特性。常見的有：display:table 聲明一個表格display:table-row 聲明一個行display:table-cell 聲明一個單元格。簡單的使用示例（快速入門）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .table dis

13、play: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="cel

14、l">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)需要的水平垂直居中效果。<!DOCTYPE html><

15、;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 clas

16、s="box"> <p> TABLE-CELL-TEST<br/> TABLE-CELL-TEST<br/> TABLE-CELL-TEST<br/> </p> </div></body></html>優(yōu)點(diǎn)缺點(diǎn)垂直居中多行內(nèi)容特別是文字內(nèi)容只有IE8+ 才支持只能垂直居中內(nèi)聯(lián)元素、行內(nèi)塊通過模擬表格的方其優(yōu)點(diǎn)在于可以垂直居中多行內(nèi)容，但是缺點(diǎn)就是目前只有IE8+的版本才被支持。2.4 position + margin:負(fù)值通過定位可以實(shí)現(xiàn)水平垂直居中，不過對使用的條件要求

17、較高，首先內(nèi)容要進(jìn)行絕對定位(absolute)，父元素要進(jìn)行相對定位(relative)，其次內(nèi)容要有固定的尺寸，最后調(diào)整margin負(fù)值與偏移屬性的值。示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div position:relative; height:600px; width:600px; background:#eee; p position:absolute; width:200px;

18、 height:200px; top:50%; left:50%; margin-left:-100px; margin-top:-100px; background:#aaa; </style></head><body> <div> <p>MARGIN:0PX AUTO</p> </div></body></html>優(yōu)點(diǎn)缺點(diǎn)應(yīng)用范圍光兼容性好進(jìn)行居中的元素要有固定的尺寸要計算margin負(fù)邊距值2.5 position + margin:auto對于絕對定位的元素來說,其默認(rèn)效果是：

19、尺寸會自動收縮適應(yīng)內(nèi)容。位置默認(rèn)的是auto，邊距則默認(rèn)值為0。此時如果在默認(rèn)尺寸的情況下，我們將其四個方向的偏移值都設(shè)置為0的話，元素會自動向四個方向拉伸100%貼合其參照元素。如果再設(shè)置固定寬度，并設(shè)置 margin:auto,那么便可以驚奇的發(fā)現(xiàn)，絕對定位的元素會水平垂直居中在父元素（參照元素）中。關(guān)于 margin:auto為什么能水平居中塊級而不能垂直居中的問題auto是自動分配的意思，margin:auto,便是自動分配邊距的意思。但是根據(jù)CSS2.1的規(guī)范，塊級元素的寬度是參照其父元素的寬度（也就是為什么塊級元素獨(dú)占一行的原因），只有寬度是100%，auto才能夠進(jìn)行分配，然后讓

20、元素水平居中，但是問題來了，CSS規(guī)范同時也定義了塊級元素的高度是根據(jù)內(nèi)容適應(yīng)，也就是說塊級元素的高度是不可知的，所以為上下邊距設(shè)置auto當(dāng)然不能進(jìn)行垂直居中。然而當(dāng)我們給一個元素進(jìn)行定位，使其成為塊級元素并脫離文檔流時，又同時為其設(shè)置top:0;right:0;bottom:0;left:0，便會將該元素的尺寸完全貼合其父元素或參照元素，即width:100%,height:100%,那么此時再設(shè)置margin:auto,便可以進(jìn)行水平/垂直居中。示例：<!DOCTYPE html><html lang="en"><head> <

21、;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"&

22、gt; <p>This is Position Advace</p> </div></body></html>優(yōu)點(diǎn)缺點(diǎn)使用條件簡單無需計算負(fù)邊距值進(jìn)行居中的元素要有固定的尺寸只有IE8+支持2.6 position + translate通過CSS3的 translate 實(shí)現(xiàn)的水平垂直居中，其原理與position+margin負(fù)值的方式很類似。但是相比于margin負(fù)值方式，其優(yōu)點(diǎn)體現(xiàn)于：不需要為內(nèi)容設(shè)置固定的寬度。不需要手動計算負(fù)邊距值。transform:translate(-50%,-50%) 可以自動向左與向上移動當(dāng)前元素

23、寬度的50%。示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div position:relative; height:600px; width:600px; background:#eee; p position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); ound:#aaa; </style></he

24、ad><body> <div> <p>transForm</p> </div></body></html>優(yōu)點(diǎn)缺點(diǎn)可以不需要為居中的盒子設(shè)置固定的尺寸手機(jī)端只有IE9+支持2.7 position + calccalc() 是CSS3的函數(shù)屬性，其功能是進(jìn)行四則運(yùn)算，參與運(yùn)算的值可以是相對單位，也可以是絕對單位。利用calc進(jìn)行居中的原理其實(shí)就是通過為left:50%,top:50%,然后讓50%再減去當(dāng)前元素寬度或者高度的一半，其機(jī)制仍然屬于負(fù)邊距方式，但相比于position的負(fù)邊距以及于transl

25、ate等方式，它主要減少了樣式的聲明數(shù)量。示例： <!DOCTYPE html><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:calc(50% - 100px); top:calc(50% - 1

26、00px); background:#eee; </style></head><body> <div class="box"> <p>CSS3 - CALC</p> </div></body></html>優(yōu)點(diǎn)缺點(diǎn)減少樣式聲明手機(jī)端需要為居中的元素設(shè)置固定尺寸只有IE9+、Chrome19+2.8 相對于viewport進(jìn)行水平垂直居中CSS3中引入了新的度量單位，vh 與 vw，它們都是基于viewport的相對單位，即viewport的寬度與高度分別被分為100等

27、份的vh 與 vw。也就是說：1vh = 1%(viewport的高度)1vw = 1%(viewport的寬度)那么為當(dāng)前元素的尺寸設(shè)置為 50vh與50vw 即當(dāng)前窗口的高度與寬度的一半，再結(jié)合 translate(50%,50%) 便可以將當(dāng)前元素水平垂直居中在當(dāng)前窗口中。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> p position:absolute; width:50vw; height:5

28、0vh; transform:translate(50%,50%); background:#eee; </style></head><body> <div class="box"> <p>CSS3 - CALC</p> </div></body></html>優(yōu)點(diǎn)缺點(diǎn)在基于窗口的環(huán)境下使用只有IE9+ 、Chrome26+、Firefox19+、safair6.0+ 支持固定尺寸2.9 css3 - flexflex可謂是CSS3加入的強(qiáng)大布局特性，利用flex我們

29、可以實(shí)現(xiàn)靈活方便且可塑的布局方案。利用flex布局只需要簡單的設(shè)置兩行樣式聲明即可實(shí)現(xiàn)元素的水平與垂直居中。justify-content:center 水平居中排列align-items:center 垂直居中排列示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div display:flex; justify-content:center; align-items:center; text-ali

30、gn: center; background:#eee; p background:#aaa; </style></head><body> <div> <p>FLEX</p> </div></body></html>優(yōu)點(diǎn)缺點(diǎn)移動端 無需設(shè)置固定尺寸兼容性低版本IE不支持3 圖片相關(guān)的水平垂直居中專門用于圖片水平垂直居中的CSS方法，并且以下方法都可以在所有瀏覽器中得到兼容。3.1 背景圖方式這種方式最簡單，就是將圖片作為背景圖，然后設(shè)置 background-position:cente

31、r center 讓其水平垂直居中在元素中。3.2 CSS 表達(dá)式這種方式要借助IE的私有擴(kuò)展，并且這種方式的好處是可以兼容到IE5。缺點(diǎn)也很明顯，就是只能用于圖片，因?yàn)檫@涉及到CSS表達(dá)式中的 this.height。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .box display:table-cell; /* 在高版本瀏覽器中通過表格特性進(jìn)行垂直居中圖片 */ width:500px; heig

32、ht:500px; vertical-align: middle; background:#eee; .box img display: block; margin:0px auto; margin-top:expression(500 - this.height)/2); /* IE 瀏覽器的專有CSS 表達(dá)式屬性 */ </style></head><body> <div class="box"> <img src=" alt="" /> </div></body></html>3.3 button 方式這種方式有些過濾奇技淫巧，但是好處就是可以兼容所有瀏覽器，但是在IE瀏覽器中會有稍微的瑕疵，也就是當(dāng)單擊的時候，圖片會有輕微的晃動。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <sty

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論