无论字体系列或字体大小如何，有没有办法使文本垂直居中？答案

【问题标题】：Is there a way to center a text vertically regardless of font-family or font-size?无论字体系列或字体大小如何，有没有办法使文本垂直居中？
【发布时间】：2018-07-16 15:44:26
【问题描述】：

我正在寻找一种与字体无关的方式来使 div 中的文本居中。我有一个按钮样式的固定高度 div。我想将文本垂直居中（仅一行）。问题是当我更改字体系列时，某些字体不会垂直居中。有没有办法根据字体度量计算所需的行高？

【问题讨论】：

你能举个例子吗？
请展示您目前拥有的内容，这样人们就不必浪费时间发布您已经尝试过的答案了。

标签： css vertical-alignment webfonts

【解决方案1】：

试试这个解决方案，希望它对你有用。

.content{
    align-items: center;
    display: flex;
    justify-content: center;
    height: 150px;
}

<div class="content">
  <span>Hello world</span>
</div>

【讨论】：

【解决方案2】：

你可以设置line-height等于按钮的高度。

div {
    height: 50px;
    line-height: 50px;
    
    border: 1px solid;
}

&lt;div&gt;Button&lt;/div&gt;

【讨论】：

这不适用于所有字体。有些字体的构建方式不同，并且不居中。

【解决方案3】：

试试这个，我不使用行高：

button {
  height: 40px;
  display: table;
}

button>span {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

button.one {
  font-family: "Helvetica Neue";
  font-size: 30px;
}

button.two {
  font-family: sans-serif;
  font-size: 18px;
}

button.three {
  font-family: Helvetica;
  font-size: 18px; 
}

button.four {
  font-family: Arial;
  font-size: 20px;
}

button.five {
  font-family: Times New Roman;
  font-size: 30px;
}

<button class="one"><span>text</span></button>
<br>
<br>
<button class="two"><span>text</span></button>
<br>
<br>
<button class="three"><span>text</span></button>
<br>
<br>
<button class="four"><span>text</span></button>
<br>
<br>
<button class="five"><span>text</span></button>

如果文本size 扩展了按钮的高度，那么您将得到一个失败的结果，这应该是明显的，因为按钮的高度为fixed。

【讨论】：