CSS有哪些居中的方法

這篇文章主要介紹“CSS有哪些居中的方法”，在日常操作中，相信很多人在CSS有哪些居中的方法問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS有哪些居中的方法”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站建設(shè)、成都做網(wǎng)站與策劃設(shè)計(jì),通州網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:通州等地區(qū)。通州做網(wǎng)站價(jià)格咨詢:18982081108

1. 把margin設(shè)為auto

具體來(lái)說(shuō)就是把要居中的元素的margin-left和margin-right都設(shè)為auto，此方法只能進(jìn)行水平的居中，且對(duì)浮動(dòng)元素或絕對(duì)定位元素?zé)o效。

2、使用 text-align:center

這個(gè)沒(méi)什么好說(shuō)的，只能對(duì)圖片，按鈕，文字等行內(nèi)元素(display為inline或inline-block等)進(jìn)行水平居中。但要說(shuō)明的是在IE6、7這兩個(gè)奇葩的瀏覽器中，它是能對(duì)任何元素進(jìn)行水平居中的。

3、使用line-height讓單行的文字垂直居中

把文字的line-height設(shè)為文字父容器的高度，適用于只有一行文字的情況。

4、使用表格

如果你使用的是表格的話，那完全不用為各種居中問(wèn)題而煩惱了，只要用到 td(也可能會(huì)用到 th)元素的 align=”center” 以及  valign=”middle”  這兩個(gè)屬性就可以***的處理它里面內(nèi)容的水平和垂直居中問(wèn)題了,而且表格默認(rèn)的就會(huì)對(duì)它里面的內(nèi)容進(jìn)行垂直居中。如果想在css中控制表格內(nèi)容的居中，垂直居中可以使用  vertical-align:middle，至于水平居中，貌似css中是沒(méi)有相對(duì)應(yīng)的屬性的,但是在IE6、7中我們可以使用text-align:center來(lái)對(duì)表格里的元素進(jìn)行水平居中，IE8+以及谷歌、火狐等瀏覽器的text-align:center只對(duì)行內(nèi)元素起作用，對(duì)塊狀元素?zé)o效。

在ie6、7中可以通過(guò)css的text-algin來(lái)控制表格內(nèi)容的水平方向的對(duì)齊，無(wú)論內(nèi)容是行內(nèi)元素還是塊狀元素都有效。

但在ie8+以及chrome、firefox等瀏覽器中的text-align:center對(duì)塊狀元素?zé)o效，只能用表格自有的align屬性。

5、使用display:table-cell來(lái)居中

對(duì)于那些不是表格的元素，我們可以通過(guò)display:table-cell  來(lái)把它模擬成一個(gè)表格單元格，這樣就可以利用表格那很方便的居中特性了。例如：

但是，這種方法只能在IE8+、谷歌、火狐等瀏覽器上使用，IE6、IE7都無(wú)效。

那面所說(shuō)的都是很基礎(chǔ)的方法，自然不能稱之為奇淫巧計(jì)，下面就來(lái)說(shuō)一些需要使用一些技巧的居中方法。

6、使用絕對(duì)定位來(lái)進(jìn)行居中

此法只適用于那些我們已經(jīng)知道它們的寬度或高度的元素。

絕對(duì)定位進(jìn)行居中的原理是通過(guò)把這個(gè)絕對(duì)定位元素的left或top的屬性設(shè)為50%,這個(gè)時(shí)候元素并不是居中的，而是比居中的位置向右或向左偏了這個(gè)元素寬度或高度的一半的距離，所以需要使用一個(gè)負(fù)的margin-left或margin-top的值來(lái)把它拉回到居中的位置，這個(gè)負(fù)的margin值就取元素寬度或高度的一半。

運(yùn)行效果：

如果只想實(shí)現(xiàn)一個(gè)方向的居中，則可以只使用left , margin-left 來(lái)實(shí)現(xiàn)水平居中，使用top , margin-top來(lái)實(shí)現(xiàn)垂直居中。

7、另一種使用絕對(duì)定位來(lái)居中的方法

此法同樣只適用于那些我們已經(jīng)知道它們的寬度或高度的元素，并且遺憾的是它只支持IE9+,谷歌，火狐等符合w3c標(biāo)準(zhǔn)的現(xiàn)代瀏覽器。

下面用一段代碼來(lái)了解這種方法：

運(yùn)行效果：

這里如果不定義元素的寬和高的話，那么他的寬就會(huì)由left,right的值來(lái)決定，高會(huì)由top,bottom的值來(lái)決定，所以必須要設(shè)置元素的高和寬。同時(shí)如果改變left，right  , top , bottom的值還能讓元素向某個(gè)方向偏移，大家可以自己去嘗試。

8、使用浮動(dòng)配合相對(duì)定位來(lái)進(jìn)行水平居中

此方法也是關(guān)于浮動(dòng)元素怎么水平居中的解決方法，并且我們不需要知道需要居中的元素的寬度。

浮動(dòng)居中的原理是：把浮動(dòng)元素相對(duì)定位到父元素寬度50%的地方，但這個(gè)時(shí)候元素還不是居中的，而是比居中的那個(gè)位置多出了自身一半的寬度，這時(shí)就需要他里面的子元素再用一個(gè)相對(duì)定位，把那多出的自身一半的寬度拉回來(lái)，而因?yàn)橄鄬?duì)定位正是相對(duì)于自身來(lái)定位的，所以自身一半的寬度只要把left  或 right 設(shè)為50%就可以得到了，因而不用知道自身的實(shí)際寬度是多少。

這種使用浮動(dòng)配合相對(duì)定位來(lái)居中的方法，優(yōu)點(diǎn)是不用知道要居中的元素的寬度，即使這個(gè)寬度是不斷變化的也行;缺點(diǎn)是需要一個(gè)多余的元素來(lái)包裹要居中的元素。

看下代碼：

運(yùn)行效果：

9、利用font-size來(lái)實(shí)現(xiàn)垂直居中

如果父元素高度是已知的，要把它里面的子元素進(jìn)行水平垂直居中，則可以使用這種方法，且子元素的寬度或高度都不必知道。

該方法只對(duì)IE6和IE7有效。

該方法的要點(diǎn)是給父元素設(shè)一個(gè)合適的font-size的值，這個(gè)值的取值為該父元素的高度除以1.14得到的值，并且子元素必須  是一個(gè)inline或inline-block元素，需要加上vertical-align:middle屬性。

至于為什么是除以1.14而不是其他的數(shù)，還真沒(méi)有人知道，你只需要記住1.14這個(gè)數(shù)就行了。

在方法5中說(shuō)過(guò)在IE8+、火狐谷歌等現(xiàn)在瀏覽器中可以用display:table-cell來(lái)進(jìn)行居中，而這里的font-size的方法則適用于IE6和IE7，所以把這兩種方法結(jié)合起來(lái)就能兼容所有瀏覽器了：

上面的例子中因?yàn)橐又械脑厥且粋€(gè)塊狀元素，所以我們還需要把他變成行內(nèi)元素，如果要居中的元素是圖片等行內(nèi)元素，則可以省略此步。

另外，如果 vertical-align:middle 是寫(xiě)在父元素中而不是子元素中，這樣也是可以的，只不過(guò)計(jì)算font-size時(shí)使用的 1.14 這個(gè)  數(shù)值要變成大約 1.5 這個(gè)值。

到此，關(guān)于“CSS有哪些居中的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

網(wǎng)頁(yè)名稱：CSS有哪些居中的方法
網(wǎng)站路徑：http://muchs.cn/article42/ijcdec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航、自適應(yīng)網(wǎng)站、微信小程序、建站公司、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)