如何让段落围绕特定单词实现垂直居中？

你可以通过添加一个占满容器高度的伪元素作为对齐基准，配合vertical-align: middle实现目标单词的垂直居中，具体代码如下：

完整代码示例 #

CSS #

div {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
}

div::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: 4px;
}

p {
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}

span {
  font-weight: bold;
}

HTML #

<div>
  <p>blah blah blah blah blah blah blah blah blah blah <span>blah</span> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>

效果对比 #

• 当前实现效果：
  
• 期望实现效果：
  

原理说明 #

原来的方法无效是因为vertical-align: middle仅作用于元素所在的行框，而非整个容器的高度。通过给容器添加一个高度100%的inline-block伪元素，让目标span和这个伪元素垂直对齐，就能让span精准定位到容器的垂直中线位置，同时保持其他文本正常围绕分布。

内容的提问来源于stack exchange，提问作者Jake L