最近又找到一个css垂直居中的方法

方法1: display:flex;

.box1{ display:flex; justify-content:center; align-items:center; text-align:center; }

方法2: display:table-cell;这个超好用　　

.box2{ text-align:center; display:table-cell; vertical-align:middle; }

　方法3：margin：auto；　

.box3{ display:flex; text-align:center; } .box5 span{ margin:auto; }

　　方法4：display:-webkit-box　　

.box4{ display:-webkit-box; -webkit-box-pack: center; -webkit-box-align: center; text-align:center; }

　　方法5：line-height　

.box5{height: 35px; line-height: 35px;}

　　方法6：translate(-50%,-50%)

.box3{ position:relative;} .box3 span{ position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); width:100%; text-align:center; }

　　方法7：display:inline-block

.box4{ text-align:center; font-size:0; } .box4 span{ vertical-align:middle; display:inline-block; font-size:16px; } .box4:after{ content:''; width:0; height:100%; display:inline-block; vertical-align:middle; }

　

参考文章：https://www.cnblogs.com/moedong/p/6645483.html?utm_source=itdadao&utm_medium=referral

转载于:https://www.cnblogs.com/wlingling2017/p/7868176.html