最近又找到一个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