CSS 文字垂直居中

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

清，纯一色

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

阅读量83

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zldream1106/p/3972542.html

本文介绍了两种实现文字在容器内垂直居中的方法：line-height方法适用于单行文字；vertical-align方法则能同时处理单行或多行文字，但需注意其可能导致布局变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原始 demo

html

  <div class ="box">

    <div class="text">

      我是单行测试文字

    </div>

  </div>

  <div class="box">

    <div class="text">

       我是多行文字我是多行文字是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是>多行文字我是多行文字

    </div>

  </div>

css

  .box{ border:1px solid #f00; background-color:#eee; width:500px; height:100px;}

  .text{}

效果图：

一、单行文字的垂直居中

解决方案：line-height方法

css

   .box{ border:1px solid #f00; background-color:#eee; width:500px; height:100px;line-height:100px;}

效果图

说明：可以看到，这种方法会使得单行文字居中，而多行文字因为被设置了与容器等大的 line-height，导致文字溢出。所以该方法只适合单行文字的居中。

二、多行文字的垂直居中

解决方案：vertical-align 方法

css

  .box{ border:1px solid #f00; background-color:#eee; width:500px; height:100px;vertical-align:middle;display:table-cell;}
  .text{}

效果图：

说明：可以看到，这种方法能够使得单行文字、多行文字都居中。但是因为 table-cell 是 inline 类型，所以会导致原来的块级元素每个 div 一行移动到了同一行。如果需要分列两行，需要在外面额外添加容器对位置进行控制。

相关阅读：

大小不固定的图片、多行文字的水平垂直居中

line-height、vertical-align与display:inline-block的一些问题

转载于:https://www.cnblogs.com/zldream1106/p/3972542.html