Flexbox 是一种强大的 CSS 布局模式，适用于现代化的浏览器，并提供了一种简便的方式来实现多种布局需求，其中之一就是垂直居中。但由于存在不同的浏览器支持度，多个实现方式也随之而来。本文将介绍 Flexbox 布局下实现垂直居中的多种方式，并为读者提供了详细的学习和指导意义。
方式一：使用 align-items 属性
使用 align-items: center; 可以将子元素垂直居中，这是最常用的方式之一。下面是示例代码：
<div class="parent"> <div class="child">这是一段垂直居中的文字</div> </div>
.parent {
display: flex;
align-items: center;
height: 100px;
}
.child {
margin: auto;
}在示例中，父元素 .parent 使用 display: flex; 属性将其设置成 Flexbox 容器，并使用 align-items: center; 属性使内部子元素 .child 垂直居中。另外，为了使其水平居中，我们使用了 margin: auto;。
方式二：使用 justify-content 和 align-items 属性
使用 justify-content 和 align-items 属性可以同时使子元素水平和垂直居中，如果子元素具有固定宽度和高度，则此方式将最为适合。下面是示例代码：
<div class="parent"> <div class="child">这是一段垂直和水平居中的文字</div> </div>
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}在示例中，父元素 .parent 使用 display: flex; 属性将其设置成 Flexbox 容器，并使用 justify-content: center; 和 align-items: center; 属性同时实现内部子元素 .child 的水平和垂直居中效果。
方式三：使用 flex 属性
使用 flex 属性除了垂直居中外，还可用于实现内容的分布。下面是示例代码：
<div class="parent"> <div class="child">这是一段垂直居中的文字</div> <div class="child">这是另一段垂直居中的文字</div> </div>
// www.javascriptcn.com code example
.parent {
display: flex;
flex-direction: column;
justify-content: center;
height: 100px;
}
.child {
flex: 1;
text-align: center;
}在示例中，父元素 .parent 使用 display: flex; 属性将其设置成 Flexbox 容器，并使用 flex-direction: column; 将子元素 .child 垂直排列，使用 justify-content: center; 属性垂直居中。另外，使用了 flex: 1; 将每个子元素的尺寸设置为父元素高度的一半，使其在垂直方向上等分父元素高度。
方式四：使用 margin 和 absolute 定位
使用 margin 和 absolute 定位可以在 CSS2.1 规范下实现垂直居中，因此也被称为“传统方式”。下面是示例代码：
<div class="parent"> <div class="child">这是一段垂直居中的文字</div> </div>
// www.javascriptcn.com code example
.parent {
position: relative;
height: 100px;
}
.child {
position: absolute;
top: 50%;
margin-top: -10px;
width: 100%;
text-align: center;
}在示例中，父元素 .parent 使用 position: relative; 属性将其设置为相对定位，子元素 .child 使用 position: absolute; 属性将其设置为绝对定位，top: 50%; 可以将其垂直居中，但此时子元素上边框的位置也在中心，因此使用了 margin-top: -10px; 将上边框位置向上偏移一半。另外，使用了 width: 100%; 将子元素宽度设为父元素的宽度，并使用 text-align: center; 让其水平居中。
我们需要什么？学习和指导
本文介绍的四种方式都是 Flexbox 布局下实现垂直居中的常用方式，并且各有优缺点。我们需要学习和掌握这些方式，并根据实际需求选择最适合的方式。此外，在代码编写过程中，我们也需要注意浏览器的兼容性，以便确保实现的布局在各种浏览器下都能正常运行。
建议大家对以上代码进行调试，体验其中的差异，这对于理解具有较大帮助。掌握了这些技巧，我们就可以更加灵活地处理页面布局的垂直居中问题了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6b346a941bf7134c890f8