CSS - 正确的文本垂直中心对齐[重复]

Question

这个问题在这里已有答案：

• How do I vertically center text with CSS? [duplicate] 38回答

我需要垂直对齐div中的文本。我找到了许多方法，但没有一个方面尊重文本的确切内容 - 我在谈论文本行下方的小图形部分 - 例如“ygq”等，例如在大写字母使用“YGQ”，但在显示文本时仍会计算。我试过了：

.button {
    height: 20px;
    line-height: 20px;
}

<div class="button">My text</div> 
<div class="button">MY TEXT</div> 

而另一种方式

.button {
    height: 20px;
    display: flex;
    align-items: center;
}

<div class="button"><p>My text</p></div> 
<div class="button"><p>MY TEXT</p></div> 

我使用padding属性，当我确定时，不会显示该行下方的图形。有没有办法，如何根据文本的确切内容对齐文本？

问题How do I vertically center text with CSS?没有回答这个，因为解决方案是基于“行高”，如我在我的问题中提到的那样仍然需要计算下面的图形。

Answer 1

要使元素垂直居中，可以将display:flex与父容器.button一起使用，并将margin:auto应用于子元素。

 

.button{
    height: 150px;
    display: flex;
    background-color: aliceblue;
 }
.button p {
   margin: auto;
}

    <div class="button">
        <p>My text</p>
    </div>

Answer 2

试试这个：：

.button{
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}

<div class="button">
        <p>My text</p>
    </div>

Answer 3

您可以使用位置和变换将项目垂直对齐在另一个项目内

.button {
    position: relative;
}

.button p {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* For horizontal align */
    width: 100%;
    text-align: center;
}

    <div class="button">
        <p>My text</p>
    </div>