移动端小标签设计稿效果还原：如何实现边界包裹文本且文字垂直居中？

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《移动端小标签设计稿效果还原：如何实现边界包裹文本且文字垂直居中？ 》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

CSS还原移动端小标签设计稿效果

如何在移动端还原边界包裹文本且文字垂直居中的小标签效果？使用传统方法时，会在移动端出现轻微的垂直居中偏移，影响显示效果。

解决方法：

1. Flex 布局

.tag {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  line-height: normal; /* 在某些安卓下，垂直居中 */
  border: 1px solid red;
}

2. 绝对布局

.tag {
  position: relative;
  border: 1px solid red;
}
.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

今天关于《移动端小标签设计稿效果还原：如何实现边界包裹文本且文字垂直居中？ 》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！