如何在 <div> 元素 css 中垂直对齐文本？ [复制]答案

【问题标题】：How to vertically align text within <div> element css? [duplicate]如何在 <div> 元素 css 中垂直对齐文本？ [复制]
【发布时间】：2019-02-22 00:12:40
【问题描述】：

我第一次制作 chrome 扩展程序，并尝试将文本居中。而当我使用text-align: centre; 水平对齐它但无法弄清楚如何垂直对齐时，我的文本看起来像这样：

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

【问题讨论】：

标签： html css google-chrome google-chrome-extension

【解决方案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>

ex) 弹性

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>

【讨论】：

它对我很有效！很好的解决方案。

【解决方案2】：

我为此使用的一个非常简单的类是

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

希望这会有所帮助！

【讨论】：