css 按钮文字上下居中对齐

CSS的按钮设计在网页中经常用到，风格各异，但是其中一个比较重要的要求就是要求按钮中的文字要进行上下居中对齐，这样才能保证页面的美观性和用户体验的一致性。那么在CSS中如何进行按钮文字的上下居中对齐呢？

/* 简单实现方式 */
button {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;
}

/* 完整实现方式 */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;
}

对于简单实现方式，我们只需要定制按钮的高度、内边距以及文字的行高，就能进行基本的按钮设计。但是如果我们需要定制一些高级需求，比如垂直和水平居中，这样的需求只靠简单实现方式是不够的。

使用完整的实现方式，我们可以通过设置display属性对按钮进行布局，同时通过align-items和justify-content属性来实现居中对齐。具体实现方式可以参考上面的CSS代码。

总之，CSS按钮的上下居中对齐是非常基础的技巧，我们需要掌握。通过简单的技巧和完整的实现方式，我们可以定制出风格各异的按钮，不仅提高了美观性，更重要的是提高了用户的使用体验。