国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用CSS讓DIV上下左右居中的方法

Tikitoo / 3410人閱讀

摘要：讓其上下左右居中。行內(nèi)塊沒(méi)有固定高度時(shí)也會(huì)上下居中顯示。步驟步驟子設(shè)定為行內(nèi)塊元素父設(shè)置行高使子上下居中父設(shè)置文本居中使子左右居中。

例如 一個(gè)父div(w:100%;h:400px)中有一個(gè)子div(w:100px;100px;)。讓其上下左右居中。

方法一（varticle-align）

理念

利用表格單元格的居中屬性。

步驟

  • 父div外層配置一個(gè)div，同時(shí)設(shè)置為表格元素 (display: table)，寬度為100%
  • 父div配置為表格單元格元素 (display: table-cell)
  • 父div配置居中屬性（vertical-align: middle），使子div上下居中
  • 子div通過(guò)margin配置左右居中（margin-left:auto; margin-right:auto）

例子

注：

  • 表格單元格比較特殊，如果只有一個(gè)單元格時(shí)，它的寬度默認(rèn)會(huì)占父級(jí)（table|tr）寬度的100%;
  • table默認(rèn)寬度不會(huì)撐開(kāi)，需要手動(dòng)配置width:100%；

方法二（line-height）

理念

當(dāng)父div的行高等于自身高度時(shí)，內(nèi)部的行內(nèi)元素會(huì)上下居中顯示。行內(nèi)塊沒(méi)有固定高度時(shí)也會(huì)上下居中顯示。通過(guò)文本居中屬性text-align:center,可以使內(nèi)部行內(nèi)元素或行內(nèi)塊元素左右居中顯示。

步驟

  • 子div設(shè)定為行內(nèi)塊元素(display:inline-block)；
  • 父div設(shè)置行高(line-height)使子div上下居中
  • 父div設(shè)置文本居中(text-align:center)使子div左右居中。

例子

注： 行高如果設(shè)置為當(dāng)前父div的高度(400px)的話，有固定高度的子div并不會(huì)居中顯示的，問(wèn)題出在瀏覽器默認(rèn)將其當(dāng)做文本居中的，即把它當(dāng)做了一段文本（chrome默認(rèn)font-size:16px;hight:21px）進(jìn)行居中，沒(méi)把它當(dāng)做高度100px進(jìn)行居中。所以需要對(duì)父div的line-height進(jìn)行調(diào)整。以font-size:0（對(duì)應(yīng)的字體高度為0）為例子，則需要line-height增加一個(gè)子div的高度（400px + 100px;）。

方法三（絕對(duì)定位）

理念

利用定位屬性（top、left、right、bottom）百分比的模式。若為100%，則代表偏移的長(zhǎng)度為父div的高度（寬度）的100%。

步驟

  • 父div標(biāo)記下定位（position:relative|absolute|fixed）;子div絕對(duì)定位（position:absolute）
  • 子div上下居中：top:50%;margin-top:-h/2; 或是 bottom:50%;margin-bottom:-h/2;；
  • 子div左右居中: left:50%;margin-left:-w/2 或是 right:50%;margin-right:-w/2；

例子

方法四（絕對(duì)定位）

理念：

定位屬性top和bottom（或是left和right）值分別設(shè)置為0，但子div有固定高度（寬度），并不能達(dá)到上下（左右）間距為0，此時(shí)給子div設(shè)置margin:auto會(huì)使它居中顯示。

步驟：

  • 父div標(biāo)記下定位（position:relative|absolute|fixed|sticky）;子div絕對(duì)定位（position:absolute）
  • 子div上下居中：top:0;bottom:0;margin-top:auto;margin-bottom:auto
  • 子div左右居中：left:0;right:0;margin-left:auto;margin-right:auto

例子

方法五（flex）

理念

彈性盒子中只要給彈性子元素設(shè)置 margin: auto; 可以使得彈性子元素上下左右居中。

例子

flex兼容性，以及存在的已知問(wèn)題

方法六（相對(duì)定位）

理念

利用定位屬性（top、left、right、bottom）百分比的模式。若為100%，則代表偏移的長(zhǎng)度為父div的高度（寬度）的100%。

步驟

  • 父div標(biāo)記下定位（position:relative|absolute|fixed）;子div相對(duì)定位（position:relative）
  • 子div上下居中：top:50%;margin-top:-h/2; 或是 bottom:-50%;margin-top:-h/2;；
  • 子div左右居中: left:50%;margin-left:-w/2 或是 right:-50%;margin-left:-w/2；

例子

注：

  • 與絕對(duì)定位不同的是，定位屬性相對(duì)的點(diǎn)是自身元素的左上角。（所以bottom是負(fù)值，和方法三絕對(duì)定位寫法有不一樣的地方）
  • 如果有同級(jí)元素，可能會(huì)受到影響。
  • 如果子div是浮動(dòng)元素，也有居中效果。

結(jié)尾

方法二和方法三兼容性要比其它好些。最簡(jiǎn)單的是彈性盒子。

補(bǔ)充

margin負(fù)值可以用2D轉(zhuǎn)換代替。優(yōu)點(diǎn)是不用計(jì)算子div的寬高。

margin-top: -h/2 => transform: translateY(-50%)
margin-bottom: -h/2 => transform: translateY(50%)
margin-left: -h/2 => transform: translateX(-50%)
margin-right: -h/2 => transform: translateX(50%)

參考資料

Can I use
css-vertical-center-solution
CSS實(shí)現(xiàn)垂直居中的5種方法--前端觀察

相關(guān)指導(dǎo)

盼先生

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/2316.html

相關(guān)文章

  • CSS垂直居中的七個(gè)方法

    摘要：下面的會(huì)造成這種樣子的垂直居中因此，如果有一個(gè)方塊變成了高度，那么其他的方塊就會(huì)真正的垂直居中。使用使用或的屬性，輕輕松松就可以做到垂直居中的效果。 我們?cè)诰庉嬕粋€(gè)版面，通常都會(huì)用到水平居中和垂直居中來(lái)設(shè)計(jì)，而水平居中很好處理，不外乎就是設(shè)定margin:0 auto；或是text-align:center；，就可以輕松解決掉水平居中的問(wèn)題，但一直以來(lái)最麻煩對(duì)齊問(wèn)題，都是垂直居中這個(gè)討...

    mingzhong 評(píng)論0 收藏0

  • CSS垂直居中的七個(gè)方法

    摘要：下面的會(huì)造成這種樣子的垂直居中因此，如果有一個(gè)方塊變成了高度，那么其他的方塊就會(huì)真正的垂直居中。使用使用或的屬性，輕輕松松就可以做到垂直居中的效果。 我們?cè)诰庉嬕粋€(gè)版面，通常都會(huì)用到水平居中和垂直居中來(lái)設(shè)計(jì)，而水平居中很好處理，不外乎就是設(shè)定margin:0 auto；或是text-align:center；，就可以輕松解決掉水平居中的問(wèn)題，但一直以來(lái)最麻煩對(duì)齊問(wèn)題，都是垂直居中這個(gè)討...

    cheng10 評(píng)論0 收藏0

  • CSS2:寬度與高度疑難點(diǎn)解析

    摘要：寬度與高度如果你的代碼里經(jīng)常出現(xiàn)和屬性說(shuō)明你對(duì)寬度與高度理解的不夠深文檔流翻譯很爛應(yīng)該為普通流或者常規(guī)流的高度字體高度與行高字和字之間是通過(guò)基線對(duì)齊的行高與默認(rèn)行高是字體設(shè)計(jì)室寫進(jìn)去的不同字體行高不一樣跟字體設(shè)計(jì)有關(guān)系字體的建議行高寫在了 CSS2:寬度與高度 如果你的CSS代碼里經(jīng)常出現(xiàn)height和width屬性,說(shuō)明你對(duì)寬度與高度理解的不夠深 1.文檔流(Normal Flow)...

    raledong 評(píng)論0 收藏0

  • 關(guān)于css 的垂直居中

    摘要：之前看了張大大的博客總結(jié)一下我對(duì)和的一些認(rèn)知。站在巨人的肩膀上學(xué)習(xí)，再次謝謝張大大阮大大的各種分享。 對(duì)于元素的水平居中，我根據(jù)我自己之前的一些學(xué)習(xí)來(lái)進(jìn)行一些總結(jié)，如果有不對(duì)的地方，歡迎指正~ 一、讓大小不固定的元素垂直居中 因?yàn)椋罕砀竦膯卧竦奶貏e屬性：垂直居中等； `div.parent { display: table-cell; vertical-align...

    caspar 評(píng)論0 收藏0

  • 關(guān)于css 的垂直居中

    摘要：之前看了張大大的博客總結(jié)一下我對(duì)和的一些認(rèn)知。站在巨人的肩膀上學(xué)習(xí)，再次謝謝張大大阮大大的各種分享。 對(duì)于元素的水平居中，我根據(jù)我自己之前的一些學(xué)習(xí)來(lái)進(jìn)行一些總結(jié)，如果有不對(duì)的地方，歡迎指正~ 一、讓大小不固定的元素垂直居中 因?yàn)椋罕砀竦膯卧竦奶貏e屬性：垂直居中等； `div.parent { display: table-cell; vertical-align...

    icattlecoder 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Tikitoo

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<