CSS—总结常用垂直居中方法

1、text-align与line-hight方法实现居中

这是比较常用的方法。通过line-hight来设置行间距是实现垂直居中的关键

2、利用padding和background-clip实现水平垂直居中

通过background-clip设置为center-box,将背景裁剪到内容区外沿,再利用padding设为外div减去内div的差的一一半来实现

3、使用transform实现垂直居中

其百分比计算不是以父元素为基准,而是以自己为基准,适用于没固定大小的内容,min-width、max-width、overflow:scroll等。使用这个属性时,不必定义子容器的高度,其会根据内容来自适应高度。但是IE8以下的浏览器不支持,而且属性需要写浏览器厂商的名字,还有可能会干扰其他transform的效果。

4、绝对居中实现垂直居中

这是一个兼容性比较好的能够实现垂直居中的方法。可以通过设置内容元素:,成为视口居中,更改百分比宽高、最大最小宽度使其能够实现响应,只要,内容块将垂直居中,使用top、left、button、right可以设置偏移居中内容比父容器高时,加可防止内容溢出但是唯一的确定就是父容器的高度必须是可知的。

5、负外边距实现垂直居中

这是比较流行的一种方法,当块元素尺寸已知,外边距margin取负数,大小为(width/heigth + pdding)/2,加上top和left各为50%,这个方法兼容IE6以上的IE浏览器,代码量也比较少。但是不能自适应,不支持百分比尺寸和min-/max-属性设置,内容可能会溢出容器,需要计算margin的取值

6、表单元(table-cell)实现垂直居中

其内容块高度可以随着实际内容的高度而变化,内容溢出时父元素会自己撑开,在浏览器中的兼容性也比较好,但是需要三层元素才能使最内层的元素居中

7、使用flexbox实现垂直居中

使用flexbox实现垂直居中很方便而且代码简洁,align-items使元素水平居中,justify-content是元素垂直居中但是其兼容性不是很好,对于IE只能兼容10以上,但是随着IE一些比较低的版本逐渐退出市场,flexbox的布局也将成为趋势

文章来源网络,如有侵权请联系小编

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180306B0659T00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券