css在移动端如何还原设计稿中的小标签效果？

Question

如图的效果：边框包裹文字，文字垂直左右居中。试过一些方式，但是移动端（安卓和苹果）查看的时候垂直方向总是有肉眼可见的不垂直居中（安卓和苹果显示效果不一致），有么有好用的方式进行设置。

Answer 1

flex布局

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

绝对布局

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

Answer 2

可以试试弹性布局居中

<div class="tag">标签</div>

.tag{
  display: flex;
  justify-content: center; //水平居中
  align-items: center; //垂直居中
}

Answer 3

看看你的代码结构,并且你初始化过样式吗,就是reset.css这些