在国内电商网站中，我们经常会遇到需要垂直居中的场景，比如商品列表、购物车、订单详情等等。而在传统的 CSS 布局中，实现垂直居中往往需要使用一些比较 hack 的方式，使得代码可读性和维护性都不太好。但是在 Flexbox 布局出现之后，我们可以使用一些更加简洁和优雅的方式来实现垂直居中。
Flexbox 布局简介
Flexbox 布局是一种新的 CSS 布局方式，它可以让我们更加方便地实现弹性的布局效果。在 Flexbox 布局中，我们可以通过设置父元素的 display: flex 属性来开启弹性布局，然后通过设置子元素的 flex 属性来控制它们在主轴和交叉轴上的分配比例和顺序。
在 Flexbox 布局中，主轴和交叉轴的方向是可以通过设置 flex-direction 属性来调整的，而子元素的对齐方式则可以通过设置 justify-content 和 align-items 属性来控制。
垂直居中的常见解决方案
方案一：使用 align-items 属性
在 Flexbox 布局中，我们可以通过设置父元素的 align-items 属性来实现子元素的垂直居中。具体来说，如果我们将 align-items 属性设置为 center，那么子元素就会在交叉轴上居中对齐。
示例代码如下：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
align-items: center;
height: 200px;
}
.item {
background-color: #ccc;
padding: 20px;
}上述代码中，我们将父元素的高度设置为 200px，然后将 align-items 属性设置为 center，就可以实现子元素垂直居中的效果。
方案二：使用 margin 属性
另一种常见的垂直居中方案是使用 margin 属性。具体来说，我们可以通过设置子元素的 margin-top 和 margin-bottom 属性为 auto，来实现子元素在父元素中垂直居中的效果。
示例代码如下：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
height: 200px;
}
.item {
background-color: #ccc;
padding: 20px;
margin: auto 0;
}在上述代码中，我们将子元素的 margin-top 和 margin-bottom 属性都设置为 auto，这样子元素就会在父元素中垂直居中。
方案三：使用 flex 属性
除了上述两种常见的垂直居中方案之外，我们还可以使用 flex 属性来控制子元素的分配比例。具体来说，我们可以将父元素的高度设置为固定值，然后将子元素的 flex 属性设置为 1，这样子元素就会平分父元素的高度，从而实现垂直居中的效果。
示例代码如下：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
height: 200px;
}
.item {
background-color: #ccc;
padding: 20px;
flex: 1;
}在上述代码中，我们将子元素的 flex 属性都设置为 1，这样子元素就会平分父元素的高度，从而实现垂直居中的效果。
总结
在 Flexbox 布局中，我们可以使用 align-items、margin 和 flex 等属性来实现子元素的垂直居中。相比传统的 CSS 布局方式，Flexbox 布局更加简洁和优雅，可以让我们更加方便地实现弹性的布局效果。因此，在开发电商网站等需要垂直居中的场景时，我们可以优先考虑使用 Flexbox 布局。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65519500d2f5e1655db5378a