---
title: "[CSS小技巧] 多行文本垂直居中"
id: "3243"
type: "post"
slug: "css%e5%b0%8f%e6%8a%80%e5%b7%a7-%e5%a4%9a%e8%a1%8c%e6%96%87%e6%9c%ac%e5%9e%82%e7%9b%b4%e5%b1%85%e4%b8%ad"
published_at: "2021-10-07T12:27:00+00:00"
modified_at: "2021-10-07T12:27:00+00:00"
url: "https://seq.ink/all/coding/3243.html"
markdown_url: "https://seq.ink/all/coding/3243.html.md"
excerpt: "一般我们进行文本居中对齐我们会给文本标签设置行高的属性使文本在容器内居中对齐。 .box{ height：200px; } .box span{ line-height:200px; } 但是一旦文本换行产生多行时行高属性就会破坏布局，这里 ..."
taxonomy_category:
  - "Coding代码堆"
taxonomy_post_tag:
  - "css"
---

一般我们进行文本居中对齐我们会给文本标签设置行高的属性使文本在容器内居中对齐。

```
.box{
   height：200px;
}
.box span{
  line-height:200px;
}
```

但是一旦文本换行产生多行时行高属性就会破坏布局，这里我提供两种方法解决并且实现效果。

解决方案一  
 父元素使用display: table;，子元素使用display：table-cell属性模拟表格，随后设置vertical-align: middle即可实现多行垂直居中。

解决方案二  
 父元素使用flex布局，更改主軸方向为垂直，随后设置flex对齐方式居中即可。