用CSS实现垂直居中的方法

布局中经常见到垂直居中效果,为实现良好的兼容性,PC端实现实现这一效果的方法一般是通过绝对定位,table-cell,负边距等。CSS让垂直居中的方法更加多样化,接下来介绍几种实现垂直居中的方法:

垂直居中效果:

用CSS实现垂直居中的方法

html代码:

用CSS实现垂直居中的方法

外部div基础CSS样式

用CSS实现垂直居中的方法

1.绝对定位和负边距

CSS:

用CSS实现垂直居中的方法

2.绝对定位和0的结合

用CSS实现垂直居中的方法

相较于第一种方法这种方法更适合用于移动端开发

3.table-cell方法

用CSS实现垂直居中的方法

注意:此处类名为.box2的div标签是块级元素,需转换成行内元素text-align:center;才能生效

4.display:flex

用CSS实现垂直居中的方法

5.display:flex和margin:auto

用CSS实现垂直居中的方法

6.display:-webkit-box

用CSS实现垂直居中的方法

7.translate

用CSS实现垂直居中的方法

用css3的transform方法来实现的

有需要的可看下,大家有什么更好的方法可在评论区分享