HTML CSS在矩形中心对齐文本[重复]

【问题标题】：HTML CSS Align Text In Center of Rectangle [duplicate]HTML CSS在矩形中心对齐文本[重复]
【发布时间】：2019-11-21 17:29:50
【问题描述】：

如何在矩形中间对齐这个内容词。 “测试”一词位于顶部。我用了一切，文本对齐：中心；垂直对齐：中间， justify-content:center, align-items: center, 还是不行

.rectangle {
  height: 75px;
  width: 75px;
  color:white;
  background-color: rgb(77,77,77);
  border-radius:7px;
  text-align:center;
  vertical-align:middle;
  justify-content:center;
  align-items: center;
}

<div class="rectangle"> 
  Test
</div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您忘记添加 display: flex 或 display:grid :)

.rectangle {
      height: 75px;
      width: 75px;
      color: white;
      display: flex;
      background-color: rgb(77, 77, 77);
      border-radius: 7px;
      justify-content: center;
      align-items: center;
    }

<div class="rectangle">
    Test
  </div>

【讨论】：

【解决方案2】：

你几乎拥有它。您正在使用属性justify-content 和align-items，但没有使用这些属性所需的flex 显示。此外，我删除了text-align: center 和vertical-align: middle，因为它们不再需要了。

.rectangle {
  height: 75px;
  width: 75px;
  color:white;
  background-color: rgb(77,77,77);
  border-radius:7px;
  display: flex;
  justify-content:center;
  align-items: center;
}

<div class="rectangle"> 
  Test
</div>

【讨论】：