在前端开发中，经常会遇到元素水平居中还好做，但是垂直居中却是一个难题。特别是当我们需要做到定宽高的垂直居中时，传统的解决方式往往十分的麻烦和复杂。为了更好地解决这个问题，我们可以使用 Flexbox 布局。
Flexbox 是什么？
Flexbox 布局是 CSS3 新增的弹性盒布局模型，能够解决许多传统布局难以实现的问题，包括定宽高的垂直居中。Flexbox 通过使用弹性容器和弹性项目来实现布局，同时支持单行、多行和呈现任意方向（从左到右或从右到左）的布局。
如何使用 Flexbox 实现定宽高的垂直居中？
在 Flexbox 布局中，我们通过以下几个属性来实现定宽高元素的垂直居中：
- display：设置父容器为弹性布局
- justify-content：设置弹性容器的主轴方向上元素的对齐方式，用于垂直居中时设置为 center
- align-items：设置弹性项在交叉轴上的对齐方式，用于水平居中时设置为 center
- height：设置元素高度
- width：设置元素宽度
下面是一个示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ---- - ------ ------ ------- ------ -
<div class="container"> <div class="box">这是一个定宽高的居中元素</div> </div>
在上面的代码中，我们首先设置了一个弹性容器 .container，并通过 justify-content 和 align-items 属性将子元素 .box 垂直居中和水平居中。同时，我们设置了子元素 .box 的宽度为 300px，高度为 100px。这样就实现了一个定宽高的垂直居中元素。
总结
Flexbox 布局是一种强大的布局方式，不仅可以解决定宽高元素的垂直居中问题，还可以实现伸缩布局、自适应布局等许多常见的布局需求。作为前端工程师，我们需要熟练掌握 Flexbox 布局的属性和用法，有针对性地运用于实际项目中，以提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ae80b968c7c53b0683eaa