可以使用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; /*让文本水平居中*/ }