css - 如何使字体全高

我需要居中，以使一些文本在X和Y轴上居中。我注意到我的文字没有全高，这是给文字全高的最佳解决方案？

我试图集中于：
1.线高
2.转换
3.弹性
4.表格-表格单元格-垂直对齐

HTML：

<div class="block">
        <p> 3 </p>
      </div>

SCSS：

.block {
    display: table;
    width: 50px;
    height: 50px;
    padding: 0 10px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #ecf3f5;
    border: 1px solid #c9dee4;
    margin-right: 20px;

    p {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
}

What I meant with full height

这个高度真的很重要，因为Small font它不可见，但是带有
Large font真的没有中心。

我希望将此文本居中。

最佳答案

我认为flex是将元素放在X和Y上居中的最佳通用方法，因此添加
display: flex;justify-content: center;align-items: center;给您的父块。之后，您可以使用任何人想要的字体高度。

.block {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    padding: 0 10px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #ecf3f5;
    border: 1px solid #c9dee4;
    margin-right: 20px;
}
p {
    line-height: 20px;
}

<div class="block">
  <p> 3 </p>
</div>

关于css - 如何使字体全高，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55675353/