设置了letter-spacing之后字符偏左，如图:

image

<input type="button" class="submit-button" value="登录" v-on:click="login"/>

.submit-button {
    display: block;
    width: 100%;
    margin: 40px 0 20px;
    color: #FFFFFF; 
    background-color: #2198E6;
    cursor: pointer; /*显示小手*/
    border: none;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    letter-spacing: 1em; /*文字间隔*/
    border-radius: 20px;
    outline: none;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s; 
}

解决方法 ： 添加属性 text-indent: 1em; /*首行缩进*/

image

.submit-button {
    display: block;
    width: 100%;
    margin: 40px 0 20px;
    color: #FFFFFF; 
    background-color: #2198E6;
    cursor: pointer; /*显示小手*/
    border: none;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    letter-spacing: 1em; /*文字间隔*/
    text-indent: 1em; /*首行缩进，文字间隔后居中*/
    border-radius: 20px;
    outline: none; /*无边框*/
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s; /*动画一直生效*/
}