css常见垂直居中方法（面试常考）

1. table-cell

    

        
Content goes here
    

#wrapper {
    display: table;
}

#cell {
    display: table-cell;
    vertical-align: middle;
}

或者

  
  
  
  



  

    

      
Content goes here
    
  

2 position absolute
下面这种必须固定高度

div class="content"> Content goes here

#content {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px; /* negative half of the height */
}

优点：
适用于所有浏览器
不需要嵌套标签
缺点：
没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)

或者使用tansform好点，无需计算高度

#content {
    position: absolute;
    top: 50%;
    height: 240px;
        transfrom: translateY(-50%); // 本质
}

position：absolute

必须固定宽高，垂直水平居中

 Content here

#content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 240px;
    width: 70%;
}

flex

.content {
  display: flex;
  align-teim: center;
}

文本垂直居中

.content {
   height: 
}