Vertical centering in Android

Question

I used flexbox, table and vertical-align to try to resolve it, but it doesn't have any effect.

You can see the screenshot below. Android's doesn't align middle (the font-size less than 12px) but iOS it work fine...

Remove line-height

set line-height: normal, upper's spacing is less then bottom...

Android

iOS

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -5px;
  padding-top: 10px;
}
.tag {
  flex: 0 0 25%;
  min-width: 0;
}
.tag .caption {
  position: relative;
  display: block;
  height: 20px;
  line-height: 20px;
  margin: 5px;
  font-size: 10px;
  color: #82879b;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag .caption:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #82879b;
  border-radius: 20px;
  transform-origin: 0 0;
  transform: scale(.5);
  box-sizing: border-box;
}

<h2> English </h2>

<div class="tags">
   <div class="tag"><span class="caption">You</span></div>
   <div class="tag"><span class="caption">see</span></div>
   <div class="tag"><span class="caption">it's</span></div>
   <div class="tag"><span class="caption">in android</span></div>
</div>

<h2> Chinese </h2>

<div class="tags">
   <div class="tag"><span class="caption">中</span></div>
   <div class="tag"><span class="caption">文</span></div>
   <div class="tag"><span class="caption">对</span></div>
   <div class="tag"><span class="caption">齐</span></div>
</div>

<h2> Japanese </h2>

<div class="tags">
   <div class="tag"><span class="caption">エネルギッシュな</span></div>
   <div class="tag"><span class="caption">サニー</span></div>
   <div class="tag"><span class="caption">ハロー</span></div>
   <div class="tag"><span class="caption">ばか</span></div>
</div>

Answer 1

I think you can center the text in Android, and everywhere else, with much less code.

Here's a simplified version:

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.tag {
  flex: 0 0 23%;
  min-width: 0;
  height: 35px;
  border-radius: 35px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tag .caption {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="tags">
  <div class="tag"><span class="caption">this</span></div>
  <div class="tag"><span class="caption">should</span></div>
  <div class="tag"><span class="caption">be centered</span></div>
  <div class="tag"><span class="caption">in android</span></div>
</div>