六种实现垂直居中的方法

方式一、利用绝对定位的方式+margin:auto




    
    CSS垂直居中
    


方式二、利用绝对定位的方式+margin反向偏移




    
    CSS垂直居中
    


方式三、基于属性的计算




    
    CSS垂直居中
    


calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。

方式四、基于vertical-align属性




    
    CSS垂直居中
    


方式五、使用弹性盒子




    
    CSS垂直居中
    


方式六、基于块级内联元素的特性




    
    CSS垂直居中
    


以上六种方式的效果图均如下:

六种实现垂直居中的方法_第1张图片
效果图.png

你可能感兴趣的:(六种实现垂直居中的方法)