如何使用CSS将行内元素居中于固定宽度的块级元素内？

要让你的<span class="centered">始终处于容器的水平中心，同时两边的文本自然延伸、超出容器的部分自动隐藏，可以通过以下CSS实现：

.container {
  width: 200px;
  white-space: nowrap; /* 强制文本不换行，保持一行 */
  overflow: hidden;    /* 隐藏超出容器的部分 */
}

.centered {
  position: relative;
  left: 50%;           /* 将span的左边缘定位到容器的水平中线位置 */
  transform: translateX(-50%); /* 将span向左偏移自身宽度的50%，让它的中心和容器中线对齐 */
  display: inline-block; /* 确保transform能正确作用于行内元素 */
}

代码细节解释： #

• position: relative + left: 50%：先把span的左边缘移动到容器的水平中点位置。
• transform: translateX(-50%)：再将span自身向左偏移一半宽度，这样span的中心就正好和容器的水平中线完全重合。
• display: inline-block：行内元素默认不支持transform属性，转为内联块后就能正常应用位移效果。
• 容器的white-space: nowrap保证所有文本（包括span前后的内容）在一行显示，overflow: hidden自动截断超出容器宽度的部分。

完整可运行示例： #

<div class='container'>
  Lorem ipsum dolor sit amet, ullum latine vituperatoribus sed ad, ut sit nihil sententiae. Ad minim prodesset eum, mei ei <span class='centered'>dicam</span> facete accusata, sea nonumy postulant ut. No fabellas facilisis mel, iriure constituto constituam vix te.
</div>

.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #eee; /* 加边框方便直观查看容器范围 */
}

.centered {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  color: #e74c3c; /* 高亮span，更易观察居中效果 */
  font-weight: bold;
}

这样设置后，不管span前后的文本长度如何变化，dicam都会牢牢固定在容器的水平中心，两边的文本向左右自然延伸，超出容器的部分自动被隐藏，完全匹配你想要的效果。

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