[分享]css两行字垂直居中

在网页设计中，经常需要将两行字垂直居中，实现这个效果的方法有很多种，其中最常用的方法是通过使用CSS来实现。/HTML部分/ 这是标题 这是内容 /CSS部分/ .wrapper { displa...

在网页设计中，经常需要将两行字垂直居中，实现这个效果的方法有很多种，其中最常用的方法是通过使用CSS来实现。

/*HTML部分*/
<div class="wrapper">
  <h1>这是标题</h1>
  <p>这是内容</p>
</div>

/*CSS部分*/
.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
}

h1, p {
  margin: 0;
} 

上述代码中，我们首先使用flex布局，将包裹两行字的div设置为按照列方向排列，并在垂直和水平方向上都居中对齐。接着，我们将两行字的上下边距都设置为0，即去除默认的间隔，这样就能达到两行字垂直居中的效果。