如何在 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>

让我知道这是否对您有帮助。

Answer 2

不要使用高度，只需使用行高

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

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

Answer 3

您可以使用

display:flex方法从上到左居中文本。

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

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

Answer 4

您可以为此使用行高，这也很好用。这是一个例子，希望对您有所帮助。

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

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

Answer 5

您可以使用显示表：

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

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