居中对齐有妙招：CSS实现垂直居中的几种方法
2023-09-22 08:57:04
前言
在前端布局过程中，我们实现水平居中比较简单，一般通过 margin:0 auto; 和父元素 text-align: center; 就能实现。但要实现垂直居中就没有那么容易，下面向大家分享下我工作中实现垂直居中的几种方法。
行高法
这种方法比较适合文字的居中，其核心是设置行高（line-height）属性。当元素的高度小于或等于其父元素的高度时，可以通过设置 line-height 为父元素的高度来实现垂直居中。
例如，如果我们有一个高度为 300 像素的父元素，里面有一个高度为 100 像素的子元素，我们可以通过以下 CSS 代码实现子元素的垂直居中：
.parent {
height: 300px;
}
.child {
line-height: 300px;
}
弹性盒布局法
弹性盒布局法是 CSS3 中的新特性，它可以轻松实现元素的垂直居中。使用弹性盒布局法，我们需要先将父元素设置为弹性容器（display: flex;），然后将子元素设置为弹性项目（display: flex-item;）。之后，我们可以通过设置 align-items 属性为 center 来实现子元素的垂直居中。
例如，我们可以使用以下 CSS 代码实现子元素的垂直居中：
.parent {
display: flex;
align-items: center;
}
.child {
display: flex-item;
}
表格法
表格法是比较传统的一种实现垂直居中方法。使用表格法，我们需要将父元素设置为表格（display: table;），然后将子元素设置为表格单元格（display: table-cell;）。之后，我们可以通过设置 vertical-align 属性为 middle 来实现子元素的垂直居中。
例如，我们可以使用以下 CSS 代码实现子元素的垂直居中：
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
外边距法
外边距法是一种比较简单的实现垂直居中方法。使用外边距法，我们需要将子元素的顶部外边距（margin-top）和底部外边距（margin-bottom）都设置为父元素高度的一半。这样，子元素就会在父元素的垂直中心位置。
例如，如果我们有一个高度为 300 像素的父元素，里面有一个高度为 100 像素的子元素，我们可以通过以下 CSS 代码实现子元素的垂直居中：
.parent {
height: 300px;
}
.child {
margin-top: 100px;
margin-bottom: 100px;
}
绝对定位法
绝对定位法也是一种比较常见的实现垂直居中方法。使用绝对定位法，我们需要将子元素的定位属性设置为 absolute，然后将子元素的顶部（top）和底部（bottom）都设置为 0。这样，子元素就会在父元素的垂直中心位置。
例如，我们可以使用以下 CSS 代码实现子元素的垂直居中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
}
transform法
transform法也是一种比较新的实现垂直居中方法。使用transform法，我们需要将子元素的变换属性（transform）设置为 translateY(-50%)。这样，子元素就会在父元素的垂直中心位置。
例如，我们可以使用以下 CSS 代码实现子元素的垂直居中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
display:flex法
display:flex法是另一种比较新的实现垂直居中方法。使用display:flex法，我们需要将父元素的显示属性（display）设置为 flex，然后将子元素的显示属性（display）设置为 flex-item。这样，子元素就会在父元素的垂直中心位置。
例如，我们可以使用以下 CSS 代码实现子元素的垂直居中：
.parent {
display: flex;
align-items: center;
justify-content: center;
}
.child {
display: flex-item;
}
总结
以上是我工作中实现垂直居中的几种方法，希望能对大家有所帮助。在实际项目中，我们可以根据具体情况选择合适的方法来实现垂直居中。
