如何将一个元素垂直居中在另一个元素的最高字符和最低字符之间（理想情况下只有 CSS，但对于 JS 也可以）？
我的意思是相对于存在的字符（实际文本内容），而不是相对于行高（不响应字符）。
目标是将元素与文本的“感知中间”对齐。
newsatan 回答：将元素置于最高和最低字符之间
这应该对您有所帮助，您可以在代码段中看到不同之处。
* {
font-family: sans-serif;
}
section {
float: left;
margin: 0 10px;
}
div {
display: flex;
flex-direction: row;
align-items: center;
height: 100px;
}
h1 {
height: 1em;
line-height: .8em;
}
h1,h2 {
border-top: 1px solid blue;
border-bottom: 1px solid blue;
font-size: 40px;
}<section>
<p>Height set to 1em</p>
<div>
<h1>oTg</h1>
<svg aria-hidden="true" class="svg-icon iconIndent" width="18" height="18" viewBox="0 0 18 18"><path d="M0 5v8l4.5-4z"></path></svg>
</div>
</section>
<section>
<p>Default height</p>
<div>
<h2>oTg</h2>
<svg aria-hidden="true" class="svg-icon iconIndent" width="18" height="18" viewBox="0 0 18 18"><path d="M0 5v8l4.5-4z"></path></svg>
</div>
</section>