随着网页设计越来越复杂，实现垂直居中文本，图片，甚至是整个块级元素，成为了前端开发人员面临的一个普遍问题。在过去，我们可能会使用相对定位和一个明确定义高度的容器来完成垂直居中的效果。但是这样的做法有时候并不是特别灵活和实用，经常需要更高效和适应性更广泛的方法。那么，Flexbox 又是如何来帮助我们完成垂直居中的呢？
Flexbox 是什么？
Flexbox 是一种强大的布局系统，它能够使我们更轻松地实现复杂的布局。Flexbox 依据轴线（主轴或交叉轴）来对齐元素。它为我们提供了多个属性来进行布局，包括主轴方向、元素在主轴上的对齐方式、元素间间距等等。
如何垂直居中？
要想实现垂直居中，需要使用 align-items 属性，它决定了元素在交叉轴上的对齐方式。默认情况下，它是采用 stretch 即占满整个交叉轴的宽度。
假如我们要实现一个 div 内文本垂直居中的情况，我们需要先给 div 添加一个 display: flex 的属性，这样它就变成了一个 Flex 容器。然后，我们只需要再添加一个 align-items: center 的属性，这样就可以使得文本在交叉轴上垂直居中了。
下面是一个容器和其内部元素使用 Flexbox 实现垂直居中的例子：
// javascriptcn.com 代码示例
<div class="flex-container">
<p>Hello World!</p>
</div>
<style>
.flex-container {
display: flex;
align-items: center;
height: 100vh; /* 设置一个高度用于演示 */
}
</style>在这个例子中，我们同样给 .flex-container 设置了一个高度，方便观察效果。这个例子非常简单，只有一个 div 和一个 p 标签。但是，这个方法同样适用于其他复杂的布局，如导航栏、侧边栏和居中内容等等。
如何水平和垂直居中？
要实现水平和垂直居中，可以结合 align-items 和 justify-content 这两个属性。其中，align-items 属性控制垂直方向的对齐，而 justify-content 属性控制水平方向的对齐。
例如，要使得一个 div 水平和垂直居中，可以使用以下样式：
// javascriptcn.com 代码示例
<div class="flex-container">
<p>Hello World!</p>
</div>
<style>
.flex-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
</style>这个例子与之前类似，但是新增了一个 justify-content 属性，并且设置了该属性的值为 center。这样就可以将文本在主轴和交叉轴上均居中了。
Flexbox 的其他属性
除了上述针对垂直、水平和垂直居中的 align-items 和 justify-content 属性之外，还有其他一些有用的属性可以用于更加精细的布局：
flex-direction：确定主轴的方向。默认值是row，也就是左到右的主轴方向。flex-wrap：确定元素在容器内是否换行。默认是nowrap，也就是不换行。flex-grow：规定元素如何填充容器以使它“增长”，并按照父容器中的剩余空间分配额外的空间。flex-shrink：规定当元素缩小时，该元素缩小的速率。
这些属性可以极大地增强 Flexbox 的使用灵活性和效率。
总结
Flexbox 是一个强大的布局系统，可以实现各种复杂的布局，特别是在垂直和水平居中上有很好的表现。加深对于 Flexbox 的理解不仅可以提高布局效率，也可以增强页面的可读性和可维护性。希望这篇文章对大家理解 Flexbox 帮助不少，持续充实自己对前端技能树的知识储备，才能更好的应对各种场景的需求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653287387d4982a6eb54adb8