你想要的CSS居中方法大全

前言

元素的居中是前端开发中非常普遍的一个需求，实现的方式也很多，这里我简单总结了一下，并画成思维导图，便于记忆。 

水平居中

行内元素

直接使用text-align:center ，效果如下图 
 
代码详见：居中行内元素

块级元素

• 一行仅有一个块级元素，直接margin:20px auto 设置左右的margin为auto即可，效果图如下 
  
• 一行有多个元素 
  
  • 使用flex实现水平居中多个元素 
    
  • 将块级元素转化为行内元素，代码见 居中多个块级元素 
    

垂直居中

行内元素

• 若为单行，则直接可以用padding-top 和padding-bottom来实现，更简便的方法是直接令行高等于元素的高度。代码见使用padding来居中单行元素和使用line-height来实现垂直居中 
  
• 若为多行，则可以考虑table布局或者直接用flex，并指定最大宽度即可，效果图和代码如下， 
  
  • 使用table布局实现多行垂直居中
  • 用flex布局实现
  • 使用伪元素，并令伪元素的高度为父容器的高度，然后垂直居中即可，这是我感觉最有意思的一种方法，代码见使用伪元素 
    

块级元素

• 若高度已知，则使用绝对布局，并用负的margin-top来让子元素向上偏移，代码见绝对布局和负margin-top
• 若高度未知，则使用transform并结合自身高度的50%来实现垂直居中，代码见居中未知高度的块级元素
• 情况允许时，使用flex。代码见使用flex实现垂直居中 
   
  

水平垂直居中

• 高度已知：使用绝对布局和负margin-top和负margin-left来实现，思路与垂直居中类似。代码见水平垂直居中
• 高度未知：使用绝对布局和transform属性来实现，关键点就在于50%的自身偏移水平垂直居中2
• 使用flex，代码见使用flex 
  

总结

flex布局是个好东西，如果你的网站对IE不做什么要求的话，就可以大胆上flex，啪啦啪啦几行代码就搞定了。