web前端入门到实战:CSS未知高度垂直居中

web前端入门到实战:CSS未知高度垂直居中_第1张图片


  
    
      
      
     CSS垂直居中  
      
    
    
    

垂直居中(table)

好了,我们看其CSS实现。凡是table能做到的,CSS都能做的,但各浏览器在CSS的差异比较大,因此要兼容它们难度很大。这涉及许多细节,各种流啊,display的表现效果与CSS hack,IE早些年搞了大堆的私有属性,这也有待我们深一步挖掘。我们先看最简单的实现,背景图片法

对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来,正因为我不是211,985,只是个普通的本科生,英语不是特别好,数学不是特别好。所以我选择了前端。工作第六个年头了,我庆幸自己选择了这条路。767-273-102 秋裙。在鹅厂做过,跟着创业头子混过。想把自己的技术分享给大家,如果你还在迷茫,也希望能进我一些绵薄之力,帮助到你。都是一群有梦想的人,我们可能在不同的城市,但我们会一起结伴同行前端前端前端

背景图片法

web前端入门到实战:CSS未知高度垂直居中_第2张图片




 CSS垂直居中

 


垂直居中

CSS表达式法

  
    
      
      
     CSS垂直居中  
      
    
    
    

垂直居中(CSS表达式)

绝对定位法



  
    
    
     CSS垂直居中
    
  
  
    

垂直居中(绝对定位)

display:inline-block法



  
    
    
    CSS垂直居中
    
    
    
  
  
    

垂直居中(inline-block法)

writing-mode法



  
    
    
     CSS垂直居中
    
  
  
    

垂直居中(writing-mode法)

web前端入门到实战:CSS未知高度垂直居中_第3张图片

你可能感兴趣的:(web前端入门到实战:CSS未知高度垂直居中)