html - 多行 CSS 居中文本

Question

我需要在一个 div 中水平和垂直地应用一些文本，这与之前在堆栈溢出上发布的这个解决方案一起工作得很好 -

text-align: center;
vertical-align: middle;
line-height: 90px;   

/* the same as your div height */

我的问题是我有多行，我将单词换行到新行 -

white-space: normal;

我的文本在一个按钮内，所以我需要这一行来抵消不允许文本正常换行的 btn 类。

但是，当我这样做时，现在我的 90px 行之间会有一个巨大的差距，正如您所期望的那样。有办法解决这个问题吗？还是另一种居中文本的方式？

Answer 1

CSS 表格工作得很好

div {
  height: 250px;
  border: 1px solid #000;
  display: table;
}
p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at efficitur nulla. Suspendisse potenti. Ut viverra velit in lobortis euismod. Mauris cursus mollis porta. Praesent ullamcorper imperdiet placerat. Nam sit amet aliquam leo. Ut a facilisis
    ex, ut fermentum felis</p>
</div>