css文本垂直居中

文本垂直居中技巧

最新推荐文章于 2025-03-12 00:30:00 发布

原创最新推荐文章于 2025-03-12 00:30:00 发布 · 512 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用CSS实现单行及多行文本的垂直居中显示。针对单行文本，仅需设置行高与区域高度相等即可。而对于多行文本，则通过模拟表格单元格的特性来达到垂直居中的效果。

单行文本垂直居中

对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可。

多行文本垂直居中

父级元素高度固定

css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，结合 display: table; ，可以使得div模拟table属性。因此我们可以设置父级div的display属性：display: table; ；然后再添加一个div包含文本内容，设置其 display:table-cell; 和 vertical-align:middle; 。

        .outer{   
            width: 500px;   
            height: 200px;   
            margin: 30px auto;   
            border: 1px solid red;   
            display: table;   
        }
   
        .inner{    
            display: table-cell;    
            vertical-align: middle;     
            text-align: center; /*设置文本水平居中*/     
            width:100%;      
        }