成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

css系列之水平垂直居中

MiracleWong / 3452人閱讀

摘要：水平居中水平居中沒(méi)有什么好說(shuō)的啦，對(duì)于行內(nèi)元素使用對(duì)于塊級(jí)元素使用前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)膶挾却怪本又袉涡形谋径嘈形谋緜卧匦袃?nèi)元素偽元素未知寬高絕對(duì)居中絕對(duì)定位已知寬高負(fù)要考慮兼容性浮動(dòng)元素垂直居中父元素

水平居中

水平居中沒(méi)有什么好說(shuō)的啦，對(duì)于行內(nèi)元素使用text-align;對(duì)于塊級(jí)元素使用margin: auto（前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)?width 寬度）;

垂直居中 單行文本 
line-height == height
多行文本 偽元素before/after 

    etttttttttttttttttttttttttttttttttttttttttttttgdfsffffffffffffffffffffffffffffffffffffffffffffffffff


.parent {
  height: 250px;
  text-align: center;
  border: 1px solid;
}
.parent:before {
  content: " ";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.child {
   width: 200px;
   display: inline-block;
   word-wrap: break-word;
   border: 1px solid;
   vertical-align: middle;
}
行內(nèi)元素 line-height 

　


.parent {
  line-height: 200px; 
}
.child {
    vertical-align: middle;
}
偽元素before/after 

　


.parent {
  height: 200px;
  border: 1px solid;
}
.parent:before {
  content: " ";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.child {
    vertical-align: middle;
}
table-cell ie8+ 

　


.parent {
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;
}
.child {
  vertical-align: middle;
}
未知寬高 絕對(duì)居中+margin:auto 
.parent {
   position: relative;
}
.child {
   position: absolute; 
   left: 0; 
   top: 0; 
   right: 0; 
   bottom: 0;
　 margin: auto;
}
絕對(duì)定位+transform ie9+ 
.parent {
   position: relative;
}
.child {
   position: absolute;
　 top: 50%;
　 left: 50%;
　 transform: translate(-50%,-50%);
}
flex ie10+ 
.parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
grid ie10+ 
.parent {
   display: grid;
   justify-content: center;
   align-items: center;
}
已知寬高 負(fù)margin

要考慮兼容性

.parent {
   position: relative;
}
.child {
   position: absolute;
　 top: 50%;
　 left: 50%;
　 margin: -height/2 -width/2;
}
padding 
.parent {
   padding: (parent.height-child.height)/2  (parent.width-child.width)/2;
}
absolute + calc ie9+ 
.parent {
   position: relative;
}
.child {
   position: absolute;
　 top: calc(50% - height/2 );
　 left: calc(50% - height/2 );
}
浮動(dòng)元素垂直居中 父元素table-cell 
#demo {
    width: 300px;
    height: 200px;
    background-color: grey;
    
    display: table-cell;
    vertical-align: middle;
}
.fl {
    float: left;
    width: 50px;
    height: 50px;
    background-color: black;

}

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

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

相關(guān)文章

  • CSS之各種居中

    摘要：前言在我看來(lái)，入門(mén)的路上最煩人的就是的各種居中了。在我初學(xué)過(guò)程中，居中這個(gè)問(wèn)題經(jīng)常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內(nèi)元素才能進(jìn)行居中。結(jié)語(yǔ)以上的方法基本上可以用完成各種情況的居中。 前言 在我看來(lái)，入門(mén)CSS的路上最煩人的就是CSS的各種居中了。在我初學(xué)CSS過(guò)程中，居中這個(gè)問(wèn)題經(jīng)常困擾到我。那為什么CSS的居中這么煩人呢？ 我認(rèn)為，這是因?yàn)镃SS的居中方法以及它的適...

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

  • CSS之各種居中

    摘要：前言在我看來(lái)，入門(mén)的路上最煩人的就是的各種居中了。在我初學(xué)過(guò)程中，居中這個(gè)問(wèn)題經(jīng)常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內(nèi)元素才能進(jìn)行居中。結(jié)語(yǔ)以上的方法基本上可以用完成各種情況的居中。 前言 在我看來(lái)，入門(mén)CSS的路上最煩人的就是CSS的各種居中了。在我初學(xué)CSS過(guò)程中，居中這個(gè)問(wèn)題經(jīng)常困擾到我。那為什么CSS的居中這么煩人呢？ 我認(rèn)為，這是因?yàn)镃SS的居中方法以及它的適...

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

  • css - 收藏集 - 掘金

    摘要：絕對(duì)底部前端掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問(wèn)題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問(wèn)題。甚至，創(chuàng)造該CSS的人還專(zhuān)門(mén)成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

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

  • CSS實(shí)現(xiàn)水平|垂直居中漫談

    摘要：原文首鏈實(shí)現(xiàn)水平垂直居中漫談利用進(jìn)行元素的水平居中，比較簡(jiǎn)單，手到擒來(lái)行級(jí)元素設(shè)置其父元素的，塊級(jí)元素設(shè)置其本身的和為即可。 原文首鏈：CSS實(shí)現(xiàn)水平|垂直居中漫談 利用CSS進(jìn)行元素的水平居中，比較簡(jiǎn)單，手到擒來(lái)：行級(jí)元素設(shè)置其父元素的text-align center，塊級(jí)元素設(shè)置其本身的left 和 right margins為auto即可。而擼起垂直居中，相信于大多初擼者來(lái)說(shuō)，...

    孫吉亮 評(píng)論0 收藏0

  • 查漏補(bǔ)缺 - 收藏集 - 掘金

    摘要：醞釀許久之后，筆者準(zhǔn)備接下來(lái)撰寫(xiě)前端面試題系列文章，內(nèi)容涵蓋瀏覽器框架分鐘搞定常用基礎(chǔ)知識(shí)前端掘金基礎(chǔ)智商劃重點(diǎn)在實(shí)際開(kāi)發(fā)中，已經(jīng)非常普及了。 這道題--致敬各位10年阿里的前端開(kāi)發(fā) - 掘金很巧合，我在認(rèn)識(shí)了兩位同是10年工作經(jīng)驗(yàn)的阿里前端開(kāi)發(fā)小伙伴，不但要向前輩學(xué)習(xí)，我有時(shí)候還會(huì)選擇另一種方法逗逗他們，拿了網(wǎng)上一道經(jīng)典面試題，可能我連去阿里面試的機(jī)會(huì)都沒(méi)有，但是我感受到了一次面試1...

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

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

0條評(píng)論

閱讀需要支付1元查看
<