如何垂直居中div？面试经常问到

• 水平居中：给div设置一个宽度，然后添加margin:0 auto属性

• div{    
  　　width:200px;
  　　margin:0 auto;
  }

• 让绝对定位的div居中

• div {   
   position: absolute;    
   width: 300px;    
   height: 300px;    
   margin: auto;    
   top: 0;    
   left: 0;    
   bottom: 0;    
   right: 0;
  }

   重点来了！

• 水平垂直居中一
• 确定容器的宽高 宽500 高 300 的层设置层的外边距

• div {    
  　　position: relative;     /* 相对定位或绝对定位均可 */    
  　　width:500px;     
  　　height:300px;    
  　　top: 50%;    
  　　left: 50%;    
  　　margin: -150px 0 0 -250px;      /* 外边距为自身宽高的一半 */  
  }

• 水平垂直居中二
• 未知容器的宽高，利用 `transform` 属性

• div {    
  　　position: absolute;     /* 相对定位或绝对定位均可 */    
  　　width:500px;     
  　　height:300px;    
  　　top: 50%;    
  　　left: 50%;    
  　　transform: translate(-50%, -50%);/* 方便看效果 */
  }　　

• 水平垂直居中三

　　利用 flex 布局，实际使用时应考虑兼容性

.container {    　　
　　display: flex; align-items: center;  /* 垂直居中 */
　　justify-content: center;    /* 水平居中 */
}
.container div {
　　width: 100px;height: 100px; /* 方便看效果 */
}