[分享]css3文子垂直居中

CSS3在布局方面带来了许多令人惊喜的新特性，其中文本垂直居中就是其中之一。在以往，我们需要使用一些复杂的技巧才能实现文本的垂直居中，如使用表格、定位以及JavaScript。但是现在，只需要使用CS...

CSS3在布局方面带来了许多令人惊喜的新特性，其中文本垂直居中就是其中之一。在以往，我们需要使用一些复杂的技巧才能实现文本的垂直居中，如使用表格、定位以及JavaScript。但是现在，只需要使用CSS3的新特性即可轻松实现文本的垂直居中。

在CSS3中，垂直居中有两种方式，一种是对于单行文本，使用line-height和height即可实现；另一种是对于多行文本，需要使用display:flex和align-items:center。

/* 单行文本垂直居中 */
.container {
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.container p {
  display: inline-block;
  vertical-align: middle;
}

/* 多行文本垂直居中 */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.container p {
  text-align: center;
} 

对于单行文本的垂直居中，我们可以将容器的高度和line-height设置为相同的值，并将文本的display属性设置为inline-block，然后使用vertical-align属性将其垂直居中。

对于多行文本的垂直居中，我们需要将容器的display属性设置为flex，然后使用align-items和justify-content将其在交叉轴方向上居中。

总而言之，使用CSS3实现文本的垂直居中变得容易而简单，可以让我们将更多的精力放在设计和创意上，让网站看起来更加专业和时尚。