flexbox设置align-items:center时多行文本仅向下扩展的实现方案

我们可以通过以下几种CSS方式实现需求，核心逻辑是让文本首行位置对齐容器垂直中点，后续行自然向下排布：

方案1：CSS Grid（最推荐） #

无需手动计算偏移，不脱离文档流，适配所有字体大小和行高设置：

HTML结构 #

<div class="container">
  <p class="content">你的文本内容，单行居中，多行第一行在中心位置向下延伸</p>
</div>

CSS样式 #

.container {
  width: 300px; /* 可自定义容器宽度 */
  height: 200px; /* 可自定义容器高度 */
  border: 1px solid #e5e7eb;
  display: grid;
  /* 将容器纵向分为两等份，文本放在下半部分的起始位置 */
  grid-template-rows: 1fr auto;
}
.content {
  margin: 0;
  line-height: 1.5; /* 可自定义行高 */
  /* 如需水平居中可加 text-align: center; */
}

该方案兼容所有现代浏览器，如需兼容IE11可选择方案2或3

方案2：绝对定位+偏移计算 #

适合容器内有其他混合元素的场景：

CSS样式 #

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #e5e7eb;
  position: relative;
}
.content {
  margin: 0;
  position: absolute;
  top: 50%;
  /* 向上偏移半个行高的距离，让首行中点对齐容器中心，0.75em对应行高1.5的一半 */
  transform: translateY(-0.75em);
  line-height: 1.5;
}

方案3：内边距实现 #

适合仅包含文本的简单容器：

CSS样式 #

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #e5e7eb;
  box-sizing: border-box;
  /* 上内边距为容器高度一半减去半个行高 */
  padding-top: calc(50% - 0.75em);
  line-height: 1.5;
}

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