flex影响了子元素文本垂直居中

<div class="codeContain">
            <input type="text" placeholder="请输入验证码" />
            <span class="getCode">获取验证码</span>
          </div>

.getCode {
  background: #59c4ee;
  border-radius: 15px;
  height:30px;//不要这个行就可以居中了，似乎height,line-height这种垂直居中方式与flex两家不合
  line-height: 30px;
  padding: 2px 8px;
  box-sizing: border-box;
  margin:auto 0;
  span{
      vertical-align: middle;
  }
}
.codeContain {
    position:relative;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
  input {
    width: 40%;
  }
}

前

后