一、position定位法
1.父容器div设置position:relative;
2.子容器div设置position:absolute;
3.子容器div定位 top:50%;
4.子容器div定位 left:50%;
5.子容器div定义负margin top:-子容器div宽度或者高度的一半；
6.子容器div定义负margin left:-子容器宽度或者高度的一半；
position定位法是利用父容器div和子容器div定位来实现div 垂直居中，需要设置定位，子容器div定义负margin来改变定位，此方法效果较好，实现难度也较大。
二、flex定位法
1.父容器div设置display:flex;
2.子容器div设置margin:auto;
3.子容器div设置margin-top：auto；
4.子容器div设置margin-bottom：auto；
flex定位法就是利用flex布局来实现div 垂直居中，只需要设置父容器和子容器的布局和margin即可实现，此方法实现简单。
三、table-cell定位法
1.父容器div设置display:table-cell;
2.子容器div设置margin:auto;
table-cell定位法是利用table单元格布局来实现div 垂直居中，只需要设置父容器和子容器的布局即可实现，此方法实现较为简单。
四、transform定位法
1.子容器div设置position:relative;
2.子容器div设置transform:translate(0,50%);
transform定位法就是利用transform属性来实现div 垂直居中，只需要设置子容器div相应的位置即可实现，此方法实现简单。
1. 使用 position 属性实现div 垂直居中：先将position属性值设为absolute或者relative，然后将top属性设置为50%，margin-top 设置为负值且与div 高度一致，即可实现div垂直居中；
2. 使用 transform 属性实现Div垂直居中：首先设置元素 position属性值为relative或absolute，然后将 transform 的 translateY 设置为负值的一半，公式为 translateY(-50%)，即可实现div垂直居中；
3. 使用 flex 布局实现div 垂直居中：在外层DIV 中设置display 属性为 flex，align-items 属性设置为center ，即可实现div 垂直居中；
4. 父元素容器采用 table-cell 布局法实现 div 垂直居中：将外层DIV 的 display设置为 table，将子元素 div 设置为 table-cell，然后将 vertical-align 属性设为 middle 即可实现div 垂直居中；
5. 父元素容器采用 line-height 法实现div 垂直居中：将外层DIV 中line-height属性值设为div 元素高度，即可实现div垂直居中。
如果觉得《div 垂直居中 div垂直居中css3》对你有帮助，请点赞、收藏，并留下你的观点哦！
