1.div的水平居中
margin:0 auto
2.table-cell实现垂直居中
样式：.box{ ???????????width: 200px; ???????????height: 200px; ???????????background: red; ???????} ???????.box1{ ???????????display: table-cell; ???????????vertical-align: middle; ???????????text-align: center; ???????}html结构：<div class="box box1"> ???<span>垂直居中</span></div>3.display:flex布局的方式
css样式：.box1{ ???????????display: flex; ???????????justify-content:center; ???????????align-items:Center; ???????}4.知道div高度和宽度的垂直居中
1.使用绝对定位，高50%，宽50%
2.然后再margin-left div宽度的一半 margin-top div高度的一半
5.不知道div高度和宽度的垂直居中
position: absolute;top: 50%;left: 50%;transform: translate("-50%","-50%");css样式之垂直居中
原文地址：https://www.cnblogs.com/wangdahua/p/9650267.html