簡(jiǎn)介4種CSS實(shí)現(xiàn)水平垂直居中的方法及優(yōu)缺點(diǎn)

yanest 發(fā)布于2019-08-01 17:33 / 3140人閱讀

摘要：絕對(duì)定位居中防止內(nèi)容越界溢出優(yōu)點(diǎn)兼容性好支持百分比寬高缺點(diǎn)必須聲明高度不適用負(fù)邊距優(yōu)點(diǎn)兼容性好缺點(diǎn)定寬高且不支持百分比表格單元優(yōu)點(diǎn)兼容性好不定寬高缺點(diǎn)層級(jí)多移動(dòng)優(yōu)點(diǎn)不定寬高缺點(diǎn)瀏覽器兼容性適合移動(dòng)端廠商前綴可能與其他屬性沖突

絕對(duì)定位居中 Absolute Centering

  
    
  

  
.Container {
  position: relative;
}
.Absolute-Center {
  position: absolute;  
  width: 50%;
  height: 50%;
  overflow: auto; //防止內(nèi)容越界溢出
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}

優(yōu)點(diǎn)：

兼容性好 Support IE8+

支持百分比寬高

缺點(diǎn)：

必須聲明高度

不適用Windows Phone

負(fù)邊距 Negative Margins

.is-Negative {
        position: absolute;
        width: 100px;
        height: 200px;
        padding: 10px;
        top: 50%; left: 50%;
        margin-left: -60px; //(width + padding)/2
        margin-top: -110px; //(height + padding)/2
}

優(yōu)點(diǎn)：

兼容性好 Support All Browser

缺點(diǎn)：

定寬高且不支持百分比

表格單元 Table Cell

  
    
      
    
  


.Container {
  display: table;
}
.Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.Child {
  width: 50%;
  margin: 0 auto;
}

優(yōu)點(diǎn)：

兼容性好 Support IE8+

不定寬高

缺點(diǎn)：

html層級(jí)多

移動(dòng) Transform:Translate

.Transform-Translate {
  position: absolute;
  width: 50%;
  margin: auto;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
}

優(yōu)點(diǎn)：

不定寬高

缺點(diǎn)：

瀏覽器兼容性（適合移動(dòng)端）

廠商前綴

可能與其他transform屬性沖突

云服務(wù)器 GPU云服務(wù)器水平垂直居中實(shí)現(xiàn)垂直居中 html的水平居中三種實(shí)現(xiàn)方法

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

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

相關(guān)文章

簡(jiǎn)介4種CSS實(shí)現(xiàn)水平垂直居中的方法及優(yōu)缺點(diǎn)

摘要：絕對(duì)定位居中防止內(nèi)容越界溢出優(yōu)點(diǎn)兼容性好支持百分比寬高缺點(diǎn)必須聲明高度不適用負(fù)邊距優(yōu)點(diǎn)兼容性好缺點(diǎn)定寬高且不支持百分比表格單元優(yōu)點(diǎn)兼容性好不定寬高缺點(diǎn)層級(jí)多移動(dòng)優(yōu)點(diǎn)不定寬高缺點(diǎn)瀏覽器兼容性適合移動(dòng)端廠商前綴可能與其他屬性沖突絕對(duì)定位居中 Absolute Centering .Container { position: relative; } .Ab...

kyanag 2019-08-21 16:19 評(píng)論0 收藏0
簡(jiǎn)介4種CSS實(shí)現(xiàn)水平垂直居中的方法及優(yōu)缺點(diǎn)

摘要：絕對(duì)定位居中防止內(nèi)容越界溢出優(yōu)點(diǎn)兼容性好支持百分比寬高缺點(diǎn)必須聲明高度不適用負(fù)邊距優(yōu)點(diǎn)兼容性好缺點(diǎn)定寬高且不支持百分比表格單元優(yōu)點(diǎn)兼容性好不定寬高缺點(diǎn)層級(jí)多移動(dòng)優(yōu)點(diǎn)不定寬高缺點(diǎn)瀏覽器兼容性適合移動(dòng)端廠商前綴可能與其他屬性沖突絕對(duì)定位居中 Absolute Centering .Container { position: relative; } .Ab...

yangrd 2019-08-29 13:22 評(píng)論0 收藏0
主流的CSS水平和垂直居中技術(shù)大全

摘要：水平居中行內(nèi)元素的水平居中在父元素中設(shè)置只對(duì)內(nèi)聯(lián)元素或行內(nèi)塊元素有效需要放置于父元素中塊級(jí)元素的水平居中只對(duì)塊級(jí)元素有效指的是自適應(yīng)寬度。參考張?chǎng)涡駥?shí)現(xiàn)絕對(duì)定位元素的居中及原理居中方式水平居中垂直居中塊級(jí)元素設(shè)置內(nèi)聯(lián)元素設(shè)置。原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 幾個(gè)月也零零散散學(xué)...

KoreyLee 2019-08-29 16:26 評(píng)論0 收藏0
16種水平居中垂直居中方法

摘要：原文鏈接水平居中若是行內(nèi)元素給其父元素設(shè)置即可實(shí)現(xiàn)行內(nèi)元素水平居中若是塊級(jí)元素該元素設(shè)置即可若子元素包含屬性為了讓子元素水平居中則可讓父元素寬度設(shè)置為并且配合作如下設(shè)置是中給屬性新加的一個(gè)屬性值它配合可以輕松實(shí)現(xiàn)水平居中原文鏈接水平居中 1) 若是行內(nèi)元素, 給其父元素設(shè)置 text-align:center,即可實(shí)現(xiàn)行內(nèi)元素水平居中.2) 若是塊級(jí)元素, 該元素設(shè)置 margin...

jerry 2019-08-30 15:54 評(píng)論0 收藏0
CSS垂直居中，你會(huì)多少種寫(xiě)法？

摘要：如果我們直接可以計(jì)算出正確的和值，豈不是一次到位函數(shù)正有此功能，當(dāng)然我們需要知道子元素的寬高效果是一個(gè)作用于內(nèi)聯(lián)元素的屬性。內(nèi)聯(lián)元素的特性是會(huì)和其它內(nèi)聯(lián)元素或者文字在同一行顯示，但是默認(rèn)情況下是與父元素基線對(duì)齊的。 ??CSS控制居中是前端開(kāi)發(fā)中非常常用的布局技能，本文列出幾種CSS控制元素居中的幾種方法。??談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于H...

caohaoyu 2019-08-29 18:43 評(píng)論0 收藏0