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

yangrd 發(fā)布于2019-08-29 13:22 / 3326人閱讀

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

絕對定位居中 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)點：

兼容性好 Support IE8+

支持百分比寬高

缺點：

必須聲明高度

不適用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)點：

兼容性好 Support All Browser

缺點：

定寬高且不支持百分比

表格單元 Table Cell

  
    
      
    
  


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

優(yōu)點：

兼容性好 Support IE8+

不定寬高

缺點：

html層級多

移動 Transform:Translate

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

優(yōu)點：

不定寬高

缺點：

瀏覽器兼容性（適合移動端）

廠商前綴

可能與其他transform屬性沖突

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

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

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

相關(guān)文章

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

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

yanest 2019-08-01 17:33 評論0 收藏0
簡介4種CSS實現(xiàn)水平垂直居中的方法及優(yōu)缺點

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

kyanag 2019-08-21 16:19 評論0 收藏0
主流的CSS水平和垂直居中技術(shù)大全

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

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

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

jerry 2019-08-30 15:54 評論0 收藏0
CSS垂直居中，你會多少種寫法？

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

caohaoyu 2019-08-29 18:43 評論0 收藏0