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

資訊專欄INFORMATION COLUMN

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

Tikitoo / 3416人閱讀

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

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

方法一（varticle-align）

理念

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

步驟

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

例子

注：

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

方法二（line-height）

理念

當(dāng)父div的行高等于自身高度時，內(nèi)部的行內(nèi)元素會上下居中顯示。行內(nèi)塊沒有固定高度時也會上下居中顯示。通過文本居中屬性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并不會居中顯示的，問題出在瀏覽器默認(rèn)將其當(dāng)做文本居中的，即把它當(dāng)做了一段文本（chrome默認(rèn)font-size:16px;hight:21px）進(jìn)行居中，沒把它當(dāng)做高度100px進(jìn)行居中。所以需要對父div的line-height進(jìn)行調(diào)整。以font-size:0（對應(yīng)的字體高度為0）為例子，則需要line-height增加一個子div的高度（400px + 100px;）。

方法三（絕對定位）

理念

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

步驟

  • 父div標(biāo)記下定位（position:relative|absolute|fixed）;子div絕對定位（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；

例子

方法四（絕對定位）

理念：

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

步驟：

  • 父div標(biāo)記下定位（position:relative|absolute|fixed|sticky）;子div絕對定位（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兼容性，以及存在的已知問題

方法六（相對定位）

理念

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

步驟

  • 父div標(biāo)記下定位（position:relative|absolute|fixed）;子div相對定位（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；

例子

注：

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

結(jié)尾

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

補(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

  • CSS垂直居中的七個方法

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

    mingzhong 評論0 收藏0

  • CSS垂直居中的七個方法

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

    cheng10 評論0 收藏0

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

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

    raledong 評論0 收藏0

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

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

    caspar 評論0 收藏0

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

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

    icattlecoder 評論0 收藏0

發(fā)表評論

0條評論

Tikitoo

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<