Html+CSS实现水平垂直居中的方法?

1.未知高度
Html+CSS实现水平垂直居中的方法?_第1张图片
代码:



  
    
    
    
    实现div水平垂直居中
    
  
  
    

2.已知高度
Html+CSS实现水平垂直居中的方法?_第2张图片
代码:



  
    
    
    
    实现div水平垂直居中
    
  
  
    

3.利用平移实现
Html+CSS实现水平垂直居中的方法?_第3张图片



  
    
    
    
    实现div水平垂直居中
    
  
  
    

父元素的子元素水平垂直居中:

第一种方法利用css3的新增属性display:table-cell;

Html+CSS实现水平垂直居中的方法?_第4张图片
代码:




  
  
  
  父元素的子元素水平垂直居中
  


  

第二种:
Html+CSS实现水平垂直居中的方法?_第5张图片
代码如下:




  
  
  
  父元素的子元素水平垂直居中
  


  

你可能感兴趣的:(笔试题,css3,常见使用场景,css3,flex,html)