以下为你介绍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"