对于前端学习者来说，无论是学习时还是工作时，垂直居中与水平居中都是绕不开的基本功技能，对这种基本功熟捻于心间，则可以更高效的完成工作，就有更多的时间去看书学习，良性循环由此而来。

　　居中一般分为垂直（vertically）居中和水平（horizontal）居中，如何居中？对于不同的元素，该分别用怎样的方法居中？

　　水平居中

　　行内元素（inline）以及inline-block, inline-table, inline-flex

　　　　对于此类元素，例如<span>、<a>等等，可以将其父元素设为text-align:center即可

　　　　

     
        
      测试元素
     

.centerWrap{  text-align: center;        }.center{  display: inline-block;  /*display: inline-flex;*/  /*display: inline-table;*/   }

　　块级元素（有固定宽度，无固定宽度的块级元素将横向撑满它的父元素，垂直居中也就无从谈起了）

　　　　对此类元素，将其margin-left与margin-right都设为auto即可，常见的设置为margin: 0 auto。顺便提一下，auto的意思是占据剩下的可用空间（父元素内），所以margin-left和margin-right都设为auto，则左右平分剩余的可用空间，自然就水平居中了。

     
          测试元素
     

　　

.center{  width: 300px;    margin: 0 auto;}

　垂直居中

　　单行的行内元素

　　　　对于内容为单行的行内元素来说，将其父元素的line-height和height设为相等即可（其实如果父元素不用非得设置height，不设置height也可以垂直居中）

     
		
      单行文字	
     

　　

.centerWrap{  height: 30px;    // 如果不是必须有高度也可以不用设置  line-height: 30px;    }

　　多行的行内元素

　　　对于内容为多行的行内元素来说，再采用单行的垂直居中方法会得到很恶心的效果，此时可以将其父元素设置为display:table，定位元素设置为display:table-cell;vertical-align:middle

　　　　　　第一行文字
　　　　第二行文字
　　　　第三行文字　　

.centerWrap{  display: table;    height: 300px;      }.center{  display: table-cell;  vertical-align: middle;      }

　块级元素（固定width）

　　对于有固定width的块级元素，可使用定位和负边距来使其垂直居中，如下：

　

     
	
      
       固定宽度的DIV垂直居中
      
     

　　

.centerWrap{  position: relative;    }.center{  width: 300px;      position: absolute;  top: 50%;  margin-top: -150px;}

　块级元素（不固定width）

　　对于不固定width的块级元素，也可以使用定位和tanslate来实现垂直居中，如下：

     
	
      
       不固定宽度的DIV垂直居中
      
     

　　

.centerWrap{  position: relative;    }.center{      position: absolute;  top: 50%;  transform: translateY(-50%);  }

　　

by the way，垂直和水平居中也可以使用flexbox（弹性盒子）来实现。