以最小高度为中心的文本并调整容器的高度答案

【问题标题】：Text centered with min-height and resize height of container以最小高度为中心的文本并调整容器的高度
【发布时间】：2017-06-12 16:11:38
【问题描述】：

我正在尝试使用水平容器填充可变大小的文本。如果文本很短，容器应该有一个最小高度并垂直居中内容。如果文本较长，则容器应增加其高度，同时保持垂直和底部边距。

我准备了jsfiddle 这个小提琴的灵感来自this answer，也尝试过display: table，如this answer和this one

【问题讨论】：

请查看并评论任何答案，如果有不清楚或遗漏的地方，请告诉我们。如果没有，那么如果您能接受对您帮助最大的答案，那就太好了。

标签： html css flexbox css-tables

【解决方案1】：

您可以使用 flexbox 并使用 justify-content 将内容居中

div.row {
  border: 1px dotted black;
  min-height:65px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

<div class="row">
  <div class="content">
    This is a case where we have a small text;
  </div>
</div>
<div class="row">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis felis ultricies fermentum elementum. Duis sollicitudin, ligula in posuere sagittis, nibh ex imperdiet ante, quis efficitur est nisl quis nulla. Donec pharetra feugiat arcu sed hendrerit. Integer aliquet porta erat, quis aliquet eros. Sed in pulvinar felis, eget lobortis dui. Vestibulum vitae imperdiet orci, in varius magna. Praesent venenatis, eros quis tristique accumsan, justo tellus tempus metus, vitae pellentesque nisl risus eu diam. Suspendisse lobortis ex et fringilla mattis. 
  </div>
</div>

【讨论】：

【解决方案2】：

Flexbox 是最明显的选择，但如果浏览器支持出现问题，CSS Table 就像 Flexbox 一样简单。

已更新（感谢Gaby aka G. Petrioli）

由于某种原因，Firefox 似乎不再尊重 min-height 上的 table。幸运的是，table 元素会随着内容的增长而增长，因此只需将 min-height 更改为 height 即可。

div.row {
  display: table;
  width: 100%;
  border: 1px dotted black;
  height: 65px;
}
div.content {
  display: table-cell;
  vertical-align: middle;
}

<div class="row">
  <div class="content">
    This is a case where we have a small text;
  </div>
</div>
<div class="row">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis felis ultricies fermentum elementum. Duis sollicitudin, ligula in posuere sagittis, nibh ex imperdiet ante, quis efficitur est nisl quis nulla. Donec pharetra feugiat arcu sed hendrerit. Integer aliquet porta erat, quis aliquet eros. Sed in pulvinar felis, eget lobortis dui. Vestibulum vitae imperdiet orci, in varius magna. Praesent venenatis, eros quis tristique accumsan, justo tellus tempus metus, vitae pellentesque nisl risus eu diam. Suspendisse lobortis ex et fringilla mattis. 
  </div>
</div>

【讨论】：

我也在考虑发布这个，但它似乎不再适用于 FF。（不知道什么时候开始发生这种情况）
@GabyakaG.Petrioli 感谢您的注意......想出了一个修复并取消删除我的答案:)