如何垂直对齐文本 element css? [duplicate]

Question

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

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

我是第一次制作镀铬扩展程序，并试图将文本居中。当我使用text-align: centre;水平对齐它但无法弄清楚如何垂直对齐的那一刻，所以此刻我的文字看起来像这样：

如果有人能提供帮助，那就太好了。

Answer 1

ex）显示：表格

div{
  display: table;
  width: 100px;
  height: 50px;
  background-color: #000;
}

div p{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: #fff;
}

<div>
  <p>chatter</p>
</div>

弯曲

div{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  background-color: #000;
}

div p{
  color: #fff;
}

<div>
  <p>chatter</p>
</div>

位置

div{
  position: relative;
  width: 100px;
  height: 50px;
  background-color: #000;
  text-align: center;
}
div p{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #fff;
}

<div>
  <p>chatter</p>
</div>

Answer 2

我用它的一个非常简单的类是

.is-vertical-center {
    display: flex;
    align-items: center;
}

希望这可以帮助！