css中文本固定高度居中

CSS中文本固定高度居中的方法
在网页设计中，经常需要将文本在容器中垂直居中显示，尤其是在设计响应式页面时，文本不同长度会导致整个容器的高度不同，因此需要使用CSS来实现文本固定高度居中。本文将介绍常用的方法。
方法一：单行文本容器固定高度居中显示
将元素的高度设置为固定的值，并将行高设置为相同的值，以实现单行文本的垂直居中。
请见下面的CSS代码：

.container {
  height: 40px;
  line-height: 40px;
  text-align: center;
} 

其中，容器的高度和行高都设置为40px，以保证文本在中间完美垂直居中。
方法二：多行文本容器固定高度居中显示
与单行文本不同，多行文本需要进行略微复杂的计算，才能实现容器的垂直居中。
首先，需要将容器的高度设置为固定值，并利用CSS3的flex布局来实现文本的垂直居中。
以下是CSS代码：

.container {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
} 

容器的高度被设置为200px，并在容器上应用了flex布局。 align-items和justify-content属性的值都是center，它们将使文本在容器中垂直和水平居中。text-align属性也设置为center，以确保文本在容器内部居中。
方法三：通过绝对定位实现文本垂直居中
如果使用两个元素来包装文本，则可以通过将外部div的position属性设置为relative，内部div的position属性设置为absolute，从而实现文本垂直居中。
下面是CSS代码示例：

.outer {
  position: relative;
  height: 200px;
  background-color: #ccc;
}
.inner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

容器的高度被设置为200px，以确保文本在容器内部居中。外部div使用相对定位，而内部div使用绝对定位，top属性设置为50%，transform属性的值为translateY(-50%)，以实现文本在垂直方向上的完美居中。
总结
以上是CSS中文本固定高度居中的三种方法，可以根据不同情况选择适合的实现方式。希望能对您有所帮助。