html - 如何将 CSS 形状中的文本居中

Question

我正在尝试为一些工作制作一个主页，我想制作一个漂亮的小按钮，上面写着“主页”。但是，我还没有到实现 onclick 的地步，所以不用担心。我尝试制作我想要的形状。

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  text-align: center;
  font-size: 25px;
}

<div id = "home">Home</div>

同样，我试图将文本“Home”置于形状的中心，这样它看起来就像在形状的中间。

Answer 1

我认为 flexbox 可能对你有帮助，检查这段代码:

#home{  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}

<div id = "home">
  <span>Home</span>
</div>

如果这对您有帮助，请告诉我。