CSS块级元素水平垂直居中常用的几种方式

提示:本文总结了在工作中常用的4种块级元素水平垂直居中方法,希望对你有所帮助

一、使用flex布局(无敌)


    

  效果图:

CSS块级元素水平垂直居中常用的几种方式_第1张图片

此方法是本鹅工作中最常用的也是最好用的,推荐大家使用!

对flex布局有兴趣研究的伙伴可以参考阮一峰大佬的博客:

Flex 布局教程:语法篇 - 阮一峰的网络日志


二、使用定位(子绝父相) + css3的translate平移属性


    

效果图同一


 三、使用定位(子绝父相)+ margin: auto


    
注意: 
1、margin: auto是具有强烈计算意味的关键字,用来分配元素对应方向上的剩余空间。例如margin:10px,等同于margin-top:10px;margin-left:10px;margin-right:10px;margin-bottom:10px

2、不使用定位的情况下,margin:auto 只能使块级元素水平居中,不能实现垂直居中,因为垂直方向上默认没有剩余的空间。margin: auto = margin: 0 auto

3、有了绝对定位后,margin-top和margin-bottom 的值就不是0了,也是通过计算所得。所以可以实现垂直居中

四、 flex布局 + margin: auto


    

效果图同一

此方法是代码量最少的一个,原理类似方法三

你可能感兴趣的:(css,前端)