如何讓圈圈的數字水平垂直置中？

Question

.popup-num-layout

    font-size: 12px;
    padding: 0;
    line-height: 25px;
    background-color: #177ce9;
    color: #fff;
    border-radius: 50%;
    font-weight: 200;
    width: 30px;
    height: 30px;
    text-align: center;
    border: 2px #fff solid;

<div class="popup-num-layout">3</div>
<div class="popup-num-layout">16</div>

水平：個位數字跟十位數字很明顯往左偏了⋯⋯
垂直：很明顯不是在垂直中間
怎麼樣做出一個完美的球＋數字呢？

---

補充

Answer 1

line-height: 50px;
width: 50px;
border-radius: 50%;
background-color: red;
text-align: center;
color: #fff;

这样就可以了

Answer 2

.popup-num-layout{
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 3

flex布局了解一下？
https://jsfiddle.net/EverJust...

Answer 4

line-height应该是30px;
左右不局中是别的原因
https://jsbin.com/juwotozanu/...