多行文本在固定高度的div中如何做到垂直居中?

14 min read

可以使用CSS的flex布局来实现垂直居中。具体的做法如下:

首先,需要给包含多行文本的 div 容器设定固定的高度和宽度,并使用 display: flex 和 align-items: center 属性来使其内容垂直居中。

接着,在包含多行文本的 div 中再套一层 div,使用 display: table-cell 和 vertical-align: middle 来使该层 div 垂直居中,同时将该层 div 的高度设置为 100%。

最后,将文本所在的标签(如 p 标签)的 display 属性设置为 inline-block,这样文本就能够在 div 容器中水平居中了。

下面是具体的实现代码:

HTML代码:

<div class="container">
  <div class="inner-container">
    <p class="text">这是一段多行文本。</p>
  </div>
</div>

CSS代码:

.container {
  height: 200px; /*设置容器高度*/
  width: 300px; /*设置容器宽度*/
  display: flex; /*使用flex布局*/
  align-items: center; /*设置垂直居中*/
  justify-content: center; /*设置水平居中*/
}

.inner-container {
  display: table-cell; /*再套一层div,并使用table-cell让其垂直居中*/
  vertical-align: middle; 
  height: 100%; /*设置高度为100%*/
}

.text {
  display: inline-block; /*让文本水平居中*/
}