文本以容器的最小高度和调整高度为中心

Question

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

我准备了一个jsfiddle fiddle 的灵感来自 this answer , also tried display: table as in this answerand this one

Answer 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>

Answer 2

Flexbox 是最明显的选择，但如果浏览器支持成为问题，CSS Table 可以像 Flexbox 一样简单。

已更新（感谢）

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>

文本以容器的最小高度和调整高度为中心

Text centered with min-height and resize height of container

html

css

flexbox

css-tables