CSS line-height行高上下居中垂直居中样式属性

CSS的line-height属性可以设置行间距和文字高度，同时还可以实现文本的上下居中和垂直居中。以下是详细的攻略：

基础用法

line-height的基本语法为：

element {
  line-height: value;
}

其中，element表示要设置行高的元素，value可以是一个数字、一个百分比值或者一个长度值，它们都是相对于该元素的字体大小计算的。常见的行高取值有以下两种：

• 单位数值：表示当前字体大小的倍数，如line-height: 1.5;表示行距为当前字体大小的1.5倍。
• 百分比值：表示当前字体大小的百分比值，如line-height: 150%;也表示行距为当前字体大小的1.5倍。

实现垂直居中

下面我们通过两个示例来讲解如何实现文本垂直居中显示。

示例一

在一个div中的居中文本可以用以下代码实现：

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

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

• 在这个示例中，我们给container设置了高度，并使用display: flex;将其转变为一个Flex布局。然后，使用justify-content: center;和align-items: center;实现了水平和垂直居中。
• 最后，我们通过设置line-height: 200px;让文本垂直居中，因为行高为容器高度（200px）。

示例二

在一个button中的居中文本可以用以下代码实现：

<button class="btn">Click me</button>

.btn {
  line-height: 60px;
  height: 60px;
  text-align: center;
}

• 在这个示例中，我们给button设置了高度和行高相等，然后使用text-align: center;让文本水平居中。
• 因为行高等于容器高度，所以文本也就垂直居中了。

实现上下居中

除了实现垂直居中，line-height还可以实现文字的上下居中。下面我们通过一个示例来演示如何实现。

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

.container {
  height: 200px;
  background-color: #eee;
}
.text {
  line-height: 200px;
  display: inline-block;
  vertical-align: middle;
}

• 在这个示例中，我们给container设置了高度，并添加了背景颜色。
• 然后，我们让.text元素变成inline-block类型的，加上vertical-align: middle;属性实现上下居中。
• 最后，我们将行高设置为与容器高度相等，就可以实现文字的上下居中了。

总而言之，line-height作为CSS中的一个重要属性，不仅可以设置行距和文字高度，还可以实现文字的上下居中和垂直居中。以上是line-height的详细攻略。