文字前面的绝对垂直居中小圆点

[AlexZ33]

在前端开发的时候经常会遇到一个问题，当一段文字设置 height: 30px;line-height: 30px; 的时候按理说我们预期它应该垂直居中的，但是实际上却不是而且各个浏览器的表现还不太一致，如下左边是一个垂直居中的红点，如果是 chrome 浏览器很明显可以感觉到文字实际上是偏下的导致和左边的点对不齐

<style>
  .dot-normal {
    border: 1px solid #eee;
    font-size: 45px;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    position: relative;
  }

  .dot-normal::before {
    background: red;
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: 10px;
    left: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
  }
</style>
<div class="dot-normal">齉齉齉</div>

vertical-align: middle 能够稍微修正这个问题，但是个人觉得往往是矫正过多

<style>
  .dot {
    border: 1px solid #eee;
    font-size: 45px;
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
  }

  .dot::before {
    background: red;
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: 10px;
    vertical-align: middle;
    width: 10px;
  }
</style>
<div class="dot">齉齉齉</div>

很明显可以看的出来左边的小圆点是跟着文字向下偏移了但是明显过多了，至于用哪种实现类似需求还是看个人了