简介4种CSS实现水平垂直居中的方法及优缺点

yangrd 发布于2019-08-29 13:22 / 3293人阅读

摘要：绝对定位居中防止内容越界溢出优点兼容性好支持百分比宽高缺点必须声明高度不适用负边距优点兼容性好缺点定宽高且不支持百分比表格单元优点兼容性好不定宽高缺点层级多移动优点不定宽高缺点浏览器兼容性适合移动端厂商前缀可能与其他属性冲突

绝对定位居中 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的水平居中三种实现方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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