Flexbox问题：带换行的文本如何保持水平居中

嘿，这个问题我太熟悉了！flex容器默认的align-items: stretch会让子元素（比如你的h1）自动拉伸占满容器的整个宽度，这就是为啥你设置align-self: center没效果——h1都已经占满宽度了，水平居中自然看不出来变化！

要实现你要的效果（文本自身左对齐，整体在flex容器里水平居中，且h1不占满容器宽度），只需要两步：

1. 让h1的宽度仅包裹自身内容，别让它拉伸占满容器。这里有两种常用方法：

   • 给h1设置 width: fit-content;：这是最语义化的方式，现代浏览器都支持，元素宽度会刚好容纳文本内容。
   • 或者设置 display: inline-block;：把h1变成行内块元素，同样不会拉伸占满容器。

2. 让flex容器控制整体水平居中：确保你的flex容器设置了 justify-content: center;，这样h1就会在容器里水平居中，同时h1内部的文本保持左对齐。

如果还想防止文本自动换行，可以给h1再加 white-space: nowrap;，不过如果允许换行但不想占满宽度，只需要上面两步就够了。

给你个完整的代码示例：

<div class="flex-container">
  <h1>这是一段可能会因为容器宽度限制换行的长文本，我希望它自身左对齐但整体在容器里居中</h1>
</div>

.flex-container {
  display: flex;
  justify-content: center; /* 核心：让子元素整体水平居中 */
  width: 320px; /* 模拟你的容器宽度限制 */
  border: 1px solid #ddd; /* 加个边框方便看容器范围 */
  padding: 10px;
}

.flex-container h1 {
  width: fit-content; /* 让h1宽度仅包裹内容，不拉伸 */
  text-align: left; /* 文本自身左对齐（默认就是left，可省略） */
  margin: 0; /* 去掉h1默认的上下外边距，可选 */
  /* 如果要强制不换行，取消下面的注释： */
  /* white-space: nowrap; */
}

这样设置后，h1就不会占满容器宽度，会乖乖待在容器中间，同时里面的文本还是左对齐的，完美符合你的需求！

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