[分享]css3怎么让文字垂直居中

 CSS3是一种非常强大的样式表语言，它能够轻松地让我们设置网页的样式。在CSS3中，有一个非常常见的问题就是如何让文字垂直居中。下面，让我们来学习一下具体的做法。 首先，我们需要明确一下，想要让文字...

 CSS3是一种非常强大的样式表语言，它能够轻松地让我们设置网页的样式。在CSS3中，有一个非常常见的问题就是如何让文字垂直居中。下面，让我们来学习一下具体的做法。
首先，我们需要明确一下，想要让文字垂直居中的话，我们需要让文字的行高等于容器的高度。而要实现这一点，我们需要使用一些CSS3的新特性。
让我们来看一个例子：

.container{
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
<br>
.container p{
  margin: 0;
  line-height: 300px;
} 

上述代码中，我们首先设置容器的高度为300px，然后使用flex布局，将内容物垂直和水平都居中。而在内部的p标签中，我们将行高设置为与容器高度相等，这样就实现了文字垂直居中的效果。
值得注意的是，在这里我们使用了display: flex; 这个特性，它可以让容器自适应浏览器窗口的大小，并让内容物垂直和水平都居中。这是CSS3的一个新特性，可以很方便地解决许多问题。
再举一个例子：

.container {
  height: 400px;
  position: relative;
}
<br>
.container p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
} 

在上述例子中，我们设置容器高度为400px，然后使用相对定位的方式让p标签绝对定位。我们使用top: 50% 让p标签的顶部与容器顶部对齐，接着使用transform: translateY(-50%) 把p标签移动到垂直方向的中心，最后再设置一个margin: 0 将文字的上下边距去掉。
可以看到，这种方法既简单又实用，是在CSS3中实现文字垂直居中的常见方法。
总结一下，CSS3提供了许多新特性，可以帮助我们轻松地实现许多炫酷的效果。在实现文字垂直居中时，我们可以使用flex布局或相对定位的方式，让文字的行高等于容器高度，就可以轻松实现垂直居中的效果。