用CSS实现垂直居中的方法

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

垂直居中效果:


html代码:


外部div基础CSS样式


1.绝对定位和负边距

CSS:


2.绝对定位和0的结合


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

3.table-cell方法


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

4.display:flex


5.display:flex和margin:auto


6.display:-webkit-box


7.translate


用css3的transform方法来实现的

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章