.parent{

　　position: relative;

}

.child{

position: absolute;

top:50%;

transform: translateY(-50%);

}

1、定位 盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;2、table-cell布局 父级 display: table-cell; vertical-align: middle;  子级 margin: 0 auto;3、定位 + transform ; 适用于 子盒子 宽高不定时； （这里是本人常用方法）position: relative / absolute;/*top和left偏移各为50%*/   top: 50%;   left: 50%;/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇）4、flex 布局父级：     /*flex 布局*/    display: flex;    /*实现垂直居中*/    align-items: center;    /*实现水平居中*/    justify-content: center;再加一种水平方向上居中 ：margin-left : 50% ; transform: translateX(-50%);