小程序CSS button按钮自定义高度之后不居中

问题：

按钮设置高度后不居中

<view>
  <button class="btn1" size="">Save</button>
</view>

page {
  font-size: 30rpx;
}

.btn1 {
  margin-top: 100rpx;
  height: 190rpx;
  background: linear-gradient(90deg, #FF8A06, #FF5711);
  border-radius: 24rpx;
  color: #fff;
}

解决：

设置一个行高

|---   line-height:190rpx, 还是不居中

 |--- 重置padding,  padding:0

.btn1 {
  margin-top: 100rpx;
  height: 190rpx;
  line-height: 190rpx;
  border-radius: 24rpx;
  color: #fff;
  padding: 0 0 0 0;
}

这回居中了 。

补充 margin问题：

diplay:flex ， 设置对齐方式失效， 是因为默认是有边距，需要置0，margin:0

<view class="submit">
  <button class="btn1" size="default">Save</button>
  <button class="btn2" size="default">Save2</button>
</view>

page {
  font-size: 30rpx;
}

.btn1 {
  margin-top: 100rpx;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 24rpx;
  color: #fff;
  padding: 0 0 0 0;
}

/*尺寸为default或者不是mini的时候，宽为650*/
.btn1:is([size=default]), .btn_1:not([size=mini]) {
  width: 214rpx;
  margin: 0;
  }


.btn2 {
  margin-top: 100rpx;
  height: 68rpx;
  line-height: 68rpx;
  padding: 0;
  border-radius: 12rpx;
  color: #F15D21;
  background-color: #fff;
  font-size: 27rpx;
  border: 1px solid #F15D21;
}

.btn2:is([size=default]), .btn_2:not([size=mini]) {
  width: 214rpx;
  margin: 0;
}

.submit {
  display: flex;
  justify-content: start;
  flex-direction: row;
  background-color: #bfc;
  padding: 20rpx;
}

.clearfix:after, .clearfix:before {
  content: "";
  display: table-cell;
  clear: both;
}