前端基本功之居中

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

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

　　水平居中

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

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

　　　　

<div class="centerWrap">
        <span class="center">测试元素</span>
</div>

.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，则左右平分剩余的可用空间，自然就水平居中了。

<div class="center">
    测试元素
</div>

　　

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

　垂直居中

　　单行的行内元素

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

<div class="centerWrap">
		<span class="center">单行文字</span>
	</div>

　　

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

　　多行的行内元素

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

<div class="centerWrap">

　　<span class="center">
　　　　第一行文字<br>
　　　　第二行文字<br>
　　　　第三行文字
　　</span>

</div>

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

　块级元素（固定width）

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

　

<div class="centerWrap">
	<div class="center">固定宽度的DIV垂直居中</div>
</div>

　　

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

　块级元素（不固定width）

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

<div class="centerWrap">
	<div class="center">不固定宽度的DIV垂直居中</div>
</div>

　　

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

　　

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