簡介4種CSS實現水平垂直居中的方法及優缺點

yangrd 發布于2019-08-29 13:22 / 3335人閱讀

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

絕對定位居中 Absolute Centering

  
    
  

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

優點：

兼容性好 Support IE8+

支持百分比寬高

缺點：

必須聲明高度

不適用Windows Phone

負邊距 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
}

優點：

兼容性好 Support All Browser

缺點：

定寬高且不支持百分比

表格單元 Table Cell

  
    
      
    
  


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

優點：

兼容性好 Support IE8+

不定寬高

缺點：

html層級多

移動 Transform:Translate

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

優點：

不定寬高

缺點：

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

廠商前綴

可能與其他transform屬性沖突

云服務器 GPU云服務器水平垂直居中實現垂直居中 html的水平居中三種實現方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112559.html

簡介4種CSS實現水平垂直居中的方法及優缺點

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

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

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

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

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

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

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

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

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

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