CSS垂直居中

position + transform

原理：根据定位关系子盒子的横向和纵向先基于父盒子移动50%，此时子盒子的左上角是居于父子的中心点的，因此利用translate反向各移动基于子盒子的50%，即可居中。

		<div class="box">
		    <div class="child"></div>
		</div>

	   .box {
	       position: relative;
	       height: 400px;
	       width: 400px;
	       margin: 0 auto;
	       border: 1px solid black;
	   }
	   .child{
	       position: absolute;
	       height: 50px;
	       width: 50px;
	       left: 50%;
	       top: 50%;
	       transform: translate(-50%,-50%);
	       border: 1px solid red;
	   }

position + margin

原理：利用margin:auto在垂直水平方向上自动分配剩余空间的原理，先让子盒子脱离标准文档流，再将子盒子强制定宽高，防止平铺，即可达到垂直居中的效果。

		<div class="box">
	    	<div class="child"></div>
		</div>

        .box {
            position: relative;
            height: 400px;
            width: 400px;
            margin: 0 auto;
            border: 1px solid black;
        }
        .child{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            height: 50px;
            width: 50px;
            border: 1px solid red;
        }

flex

		<div class="box">
		    <div class="child"></div>
		</div>

	   .box {
           display: flex;
           height: 400px;
           width: 400px;
           margin: 0 auto;
           justify-content: center;
           align-items: center;
           border: 1px solid black;
       }
       .child{
           height: 50px;
           width: 50px;
           border: 1px solid red;
       }

flex + margin

原理：margin 优先级高于justify-content和align-items，在他们格式生效前，自动分配该方向上的空余空间，不仅实在水平方向上，垂直方向上亦是如此。

		<div class="box">
		    <div class="child"></div>
		</div>

        .box {
            display: flex;
            height: 400px;
            width: 400px;
            margin: auto;
            border: 1px solid black;
        }
        .child{
            margin: auto;
            height: 100px;
            width: 100px;
            border: 1px solid green;
        }

其它

也可以利用具体的父盒子和子盒子的宽高值，来进行垂直水平移动同样能够达到垂直水平居中的效果。