margin:auto为什么不垂直居中

position定位属性大家都不会陌生               ，添加position属性的元素可以定位
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，而top














，left 
  
  
  
  
  
  
  
，right
  
  
  
  
  
  
  
 ，

bottom属性决定元素定位后所在的位置
 


 


 


 


 


 


 


 ，而在使用定位属性需要注意两点：

1.top 
 
 
 
 
 
 
 
，left, right, bottom 此类定位属性只对添加了position属性且值为非static的元素生效
   
   
   
   
   
   
   
 ，即值为fixed
 

 

 

 

 

 

 

 ，absolute 

 

 

 

 

 

 

 
，relative 其一               。

通过设置top
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，left四属性为0居中元素的做法有个前置条件






















，就是需要居中的盒子必须有固定的宽高(px)               ，否则会失效














。这就像四个方向有相同的力在拉这个盒子
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，配上margin:auto让这个盒子的位置保持中立














，来达到盒子处于正中心的目的 
  
  
  
  
  
  
  
。

.div1{

height:100px;

widyh:100px;

background-color:blue;

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;

}

<div class="div1"><div/>

margin:auto是具有强烈计算意味的关键字 
 
 
 
 
 
 
 
，用来计算元素对应方向上应该获得的剩余空间大小
 


 


 


 


 


 


 


 。

行内元素margin:auto; 不能水平居中在一行的中央位置（行内元素不独占一行） 
 
 
 
 
 
 
 
。