顺风垂直居中 - CSS

简介

在网页布局中，我们常常需要把一个元素垂直居中，这在很多情况下都是一个很麻烦的问题。顺风垂直居中是一种简单易用的 CSS 技巧，能够让我们轻松地将元素垂直居中。

实现方式

使用 flexbox （弹性盒子布局）能够轻松地实现元素的垂直居中。具体实现方式如下：

HTML 代码片段：

<div class="wrapper">
  <div class="content">
    <p>这是一段文本。</p>
  </div>
</div>

CSS 代码片段：

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.content {
  text-align: center;
}

解释

通过将容器设置为 display: flex;，我们可以开启 flexbox 布局模式。然后，我们可以使用 align-items: center; 和 justify-content: center; 分别让内容水平和垂直居中。最后，将容器的高度设置为 100vh ，使其充满整个视窗。

总结

通过使用 flexbox，我们可以轻松地实现元素的垂直居中，而不必使用复杂的计算。另外，我们还可以通过对容器和内容应用更多的 CSS 样式来控制样式和布局。