水平居中和垂直居中

水平居中：

行内元素：为该行内元素的父元素添加设置text-align:center；
块级元素：为其自身设置margin:auto样式

垂直居中：（父元素是盒子容器且高度已经设定）

子元素是行内元素：设定父元素的line-height为其自身盒子的高度
子元素是块级元素但子元素高度没有设定：设定父元素是
display:table-cell;vertical-align:middle;来解决
子元素是块级元素且高度已经设定：计算子元素是margin-top或margin-bottom，计算为父（元素高度-子元素高度）/2

垂直水平居中：

一、 利用flex布局，直接在父元素上设置

display:flex;
justify-content:center;//左右居中
align-items:center;//上下居中

二、利用定位布局，已知元素宽高
父元素：position:relative
子元素：

width:40px;
height:40px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);//或者是margin-left:-20px;margin-top:-20px;

三、利用定位方法，未知父元素宽高

<div class="wrap">
	<div class="inner">
	
	</div>
</div>

.wrap{
	width: 300px;
    height: 300px;
    background: yellow;/*加颜色是为了看界面效果*/
    position: relative;
}
.inner{
  	width: 40px;
   	height: 40px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin:auto;
    background: orange;/*加颜色是为了看界面效果*/
 }