别再手动调margin了，这5种CSS垂直居中技巧让效率翻倍
以下为你介绍5种CSS垂直居中技巧，可有效提高效率，避免手动调整`margin`：
1\.行高法（`line-height`）
当需要居中的元素为单行文本时，可将`line-height`设置为与元素高度相同。例如：
```css
.div1 {
height: 100px;
line-height: 100px;
background-color: #f2f2f2;
}
```
```html
<div class="div1">单行文本垂直居中</div>
```
该方法简单快捷，但仅适用于单行文本，且不支持多行文本或块级元素。
2\.Flexbox法
使用`display: flex`和`align-items: center`可轻松实现垂直居中，同时还可以通过`justify-content: center`实现水平居中。例如：
```css
.div2 {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
background-color: #f2f2f2;
}
```
```html
<div class="div2">内容垂直居中</div>
```
该方法代码简洁，兼容性良好，适用于多种场景，是目前最常用的垂直居中方法之一。
3\.表格单元格法（`table-cell`）
将父元素设置为`display: table`，子元素设置为`display: table-cell`，并通过`vertical-align: middle`实现垂直居中。例如：
```css
.div3 {
display: table;
height: 100px;
background-color: #f2f2f2;
}
.div3-child {
display: table-cell;
vertical-align: middle;
}
```
```html
<div class="div3">
<div class="div3-child">内容垂直居中</div>
</div>
```
该方法适用于多行文本或块级元素，但其兼容性不如Flexbox，且代码相对繁琐。
4\.绝对定位与`transform`法
将需要居中的元素设置为绝对定位，`top`和`left`均设置为`50%`，然后通过`transform: translate(-50%, -50%)`将其向左上方向移动自身宽高的`50%`，从而实现垂直居中。例如：
```css
.div4 {
position: relative;
height: 100px;
background-color: #f2f2f2;
}
.div4-child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 50%;
background-color: #ccc;
}
```
```html
<div class="div4">
<div class="div4-child">内容垂直居中</div>
</div>
```
该方法适用于宽高未知的元素，但需要使用`transform`属性，可能会对性能产生一定影响。
5\.Grid布局法
使用CSS Grid布局，将父元素设置为`display: grid`，并通过`place-items: center`实现垂直和水平居中。例如：
```css
.div5 {
display: grid;
place-items: center;
height: 100px;
background-color: #f2f2f2;
}
```
```html
<div class="div5">内容垂直居中</div>
```
该方法代码简洁，功能强大，但兼容性相对较差，不支持旧版浏览器。
总结
以上5种CSS垂直居中技巧各有优缺点，可根据实际需求选择合适的方法。在现代网页开发中，推荐使用Flexbox法或Grid布局法，因为它们代码简洁、功能强大且兼容性良好。
页:
[1]