CSS垂直居中

垂直居中

CSS让人头疼的问题就是垂直居中。实现垂直居中好几种方式，但每一种方式都有一定的局限性,所以垂直居中可以根据实际的业务场景来使用。

在容器里让内容居中最好的方式是根据特定场景考虑不同因素。做出判断前，先逐个询问自己以下几个问题，直到找到合适的解决办法。

• 容器里面的内容只有一行文字？
• 容器自然高度？
• 容器需要指定高度或者避免使用内边距？
• 使用Flexbox布局？
• 容器和内容的高度都知道？
• 不知道内部元素的高度？

容器里面的内容只有一行文字

设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。

  
  
    

      测试居中
    
  

容器自然高度

CSS中最简单的垂直居中方法是给容器相等的上下内边距，让容器和内容自行决定自己的高度。

看下面的例子, 通过设置padding-top 和padding-bottom相等的值，让内容在父容器垂直剧中。

   
    
      

         测试居中
      
    

容器需要指定高度或者避免使用内边距

可以给父容器设置display: table, 子元素设置display: table-cell;vertical-align: middle;, 让子元素来垂直居中。

  
  
    

      测试居中
    
  

使用 FlexBox

使用flex布局在做居中的时候非常容易。

  
  
    

      测试居中
    
  

容器和内容的高度都知道

将内容使用绝对定位， 只有其他方法都无法实现，才推荐这种。

  
  
    

      测试居中
    
  

不知道内部元素的高度

将内容使用绝对定位 + transform， 只有其他方法都无法实现，才推荐这种。

  
  
    

      测试居中
    
  

总结

应结合实际的业务场景来具体使用哪种方式。

参考

How to Center in CSS