Flexbox 是一种强大的布局模式，它可以在不使用 float 和 position 属性的情况下实现复杂的布局。其中，垂直居中就是其中一个常见的需求。在本文中，我们将介绍如何使用 Flexbox 实现复杂的垂直居中布局。
垂直居中的基本概念
在 CSS 中，垂直居中通常是指将一个元素的中心点与另一个元素的中心点对齐。这个另一个元素可以是父元素，也可以是兄弟元素。
在实现垂直居中时，我们需要注意以下几点：
- 确定垂直居中的参照物。通常情况下，参照物是父元素，但也可以是兄弟元素。
- 确定要垂直居中的元素。这个元素可以是文本、图片、块级元素等。
- 确定垂直居中的方式。在 Flexbox 中，我们可以使用 align-items 和 justify-content 属性来控制垂直和水平方向的对齐方式。
简单垂直居中示例
在 Flexbox 中，我们可以使用 align-items 属性来实现垂直方向的对齐。默认情况下，align-items 的值为 stretch，即让子元素沿着父元素的纵向方向拉伸。我们可以将其设置为 center，即让子元素在父元素的中心点上对齐。
<div class="parent"> <div class="child">Hello World</div> </div>
// javascriptcn.com 代码示例
.parent {
display: flex;
align-items: center;
height: 100vh;
}
.child {
margin: auto;
font-size: 3rem;
}在这个示例中，我们将父元素的高度设置为 100vh，这样可以让它占满整个屏幕。然后，我们将子元素的 margin 设置为 auto，这样它就能在父元素的中心点上对齐了。
复杂垂直居中示例
在实际的项目中，垂直居中的需求可能会比较复杂。下面我们将介绍一个比较复杂的垂直居中示例。
<div class="parent">
<div class="child">
<div class="content">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel ex a tellus fringilla fringilla. Donec facilisis, arcu et vestibulum bibendum, augue leo porta ante, non rhoncus nunc nulla vel metus.</p>
</div>
</div>
</div>// javascriptcn.com 代码示例
.parent {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.child {
width: 50%;
background-color: #f2f2f2;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
p {
font-size: 1.5rem;
line-height: 2rem;
text-align: justify;
}在这个示例中，我们使用了两层 Flexbox 布局，分别控制父元素和子元素的垂直居中。首先，我们将父元素的 align-items 和 justify-content 属性都设置为 center，让子元素在父元素中心点上对齐。然后，我们将子元素的宽度设置为 50%，并在内部使用了一个 content 容器。在 content 容器中，我们使用了 flex-direction: column 将子元素垂直排列，并使用 align-items: center 将它们在垂直方向上居中对齐。
总结
通过本文的介绍，我们可以看到 Flexbox 布局在实现复杂的垂直居中时具有很强的优势。在实际项目中，我们可以根据具体的需求灵活运用 Flexbox 布局，实现各种各样的垂直居中效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6552cd62d2f5e1655dc7d6b3