垂直水平居中的几种方法

1. margin：auto

	.father {
		width: 300px;
		height: 300px;
		background: yellow;
		position: relative;
	}
	.son {
		width: 200px;
		height: 200px;
		background: blue;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

效果图：

当元素绝对定位时，它会根据离他最近的一个非static定位的父元素进行定位，这里应该根据父元素定位。

2. 负margin

	.father {
           width: 400px;
           height: 300px;
           background: yellow;
           position: relative;
       }
       .son {
           width: 200px;
           height: 200px;
           background: pink;
           position: absolute;
           top: 50%;
           left: 50%;
           margin-top: -100px;
           margin-left: -100px;
       }

效果图：

首先用top:50%;和left:50%;让子元素的坐标原点（左上角）移动到父元素的中心，然后再利用负margin让它往左偏移自身宽的一半，再往上偏移自身高的一半，这样子元素的中心点就跟父元素的中心点对齐了。

这种情况只适用于子元素自身的宽高已知的情况，若宽高不确定，如子元素为文本，则宽高由内容确定，可以使用下面的方法：

3.transform()

	.father {
          width: 300px;
          height: 300px;
          background: yellow;
          position: relative;
      }
      .son {
      	  background: pink; /*为了观察方便设置颜色*/
          position:absolute;
          top:50%;
          left:50%;
          transform:translate(-50%,-50%);
      }

效果图：

子元素设置相对于父元素进行绝对定位，首先将子元素左上角定位到父元素中心，即使用top:50%和left:50%定位到中心，然后使用translate()相对于自身的高宽的一半进行移动，即可把自己的中心移到父元素的中心。
这里用到的原理是translate函数中的百分比是相对于元素自身的高宽来计算的。

4.flex

方法一：
当父元素设置为display:flex后，子元素设置margin:auto就可以相对于父元素在垂直和水平方向进行居中。

	.father {
		width: 200px;
		height: 200px;
		background: yellow;
		display: flex;
	}
	.son {
		 margin: auto;
	}

效果图：

方法二：
也可以直接给父元素设置容器属性让其内的项目居中：

	.father {
		width: 200px;
		height: 200px;
		background: yellow;
		display: flex;
		align-items:center; /*垂直居中*/
		justify-content: center; /*水平居中*/
	}

效果图：