修复了由于字体大小而向下推文本的宽度和高度Div

Question

我正在做一个处理HTML的小项目。我正在尝试将文本放置在div的中心，该中心具有固定的高度和固定的宽度。一切都位于absolute中。但是，设置字体大小会将文本从实际矩形下移。在同一页面上，我还有另一个矩形（在下面的示例中未显示），该矩形可以正常工作（可能是因为字体较小？）有人可以向我解释发生了什么，如何解决我的问题？

.wrapper {
  position: fixed;
  width: 120px;
  height: 72px;
  border-color: #000000;
  border-style: dotted;
}

#LetterBox.position {
  position: absolute;
  top: -4.719643044619423px;
  left: 13.15069816272966px;
}

#LetterBox.shape {
  width: 99.41917060367455px;
  height: 64.46308661417323px;
  background: red;
}

#LetterBox .font {
  font-size: 41px; /*culprit*/
  font-family: "lucida grande", Times, serif;
  color: #222222;
  text-align: center;
}

<div class="wrapper" id="layout">
  <div id="LetterBox" class="position shape">
    <p class="font">a</p>
  </div>
</div>

Answer 1

要使文本居中，请在父div上使用display:table属性，在text元素上使用display:table-cell。

这是工作代码（我没有将红色背景div居中，因为这不是问题）：

.wrapper {
  position: fixed;
  width: 120px;
  height: 72px;
  border-color: #000000;
  border-style: dotted;
}

#LetterBox.position {
  position: absolute;
  top: -4.719643044619423px;
  left: 13.15069816272966px;
}

#LetterBox.shape {
  width: 99.41917060367455px;
  height: 64.46308661417323px;
  background: red;
  display: table;
}

#LetterBox .font {
  font-size: 41px; /*culprit*/
  font-family: "lucida grande", Times, serif;
  color: #222222;
  text-align: center;
  display: table-cell; 
  vertical-align: middle;
}

<div class="wrapper" id="layout">
  <div id="LetterBox" class="position shape">
    <p class="font">a</p>
  </div>
</div>

另一个字体较小的示例：

.wrapper {
  position: fixed;
  width: 120px;
  height: 72px;
  border-color: #000000;
  border-style: dotted;
}

#LetterBox.position {
  position: absolute;
  top: -4.719643044619423px;
  left: 13.15069816272966px;
}

#LetterBox.shape {
  width: 99.41917060367455px;
  height: 64.46308661417323px;
  background: red;
  display: table;
}

#LetterBox .font {
  font-size: 30px; /*culprit*/
  font-family: "lucida grande", Times, serif;
  color: #222222;
  text-align: center;
  display: table-cell; 
  vertical-align: middle;
}

<div class="wrapper" id="layout">
  <div id="LetterBox" class="position shape">
    <p class="font">a</p>
  </div>
</div>

希望这是您所需要的。