【垂直不居中】文字上下不居中，解决line-height=height元素高度但是文字并没有垂直居中的问题<div class="m-cart"><span>加入购物清单</span></div>**********************

 

 解决方案：

<div class="m-cart"><span>加入购物清单</span></div>

 结合行高、对齐的关系并结合伪元素，添加伪类::after

.m-cart{ text-align: center; width: 120px; float: left; margin-top: 20px; line-height: 30px; background:#d00000; color: #fff; cursor: pointer;  font-size: 16px; border-radius: 30px; }
 .m-cart span::after{
            content: ' ';
            width: 0;
            height:100%;
            vertical-align: middle;
            margin-top: 1px;
}

 

原文参考：https://blog.csdn.net/qq_17030685/article/details/83350766