HTML CSS在矩形中心对齐文本

Question

如何在矩形中间对齐这个内容词。“测试”一词在顶部。我使用了所有东西， text-align:center; Vertical-align:middle, 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>

Answer 1

你几乎拥有它。您正在使用属性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>