CSS垂直方向文字居中

最新推荐文章于 2025-06-22 17:12:08 发布

转载最新推荐文章于 2025-06-22 17:12:08 发布 · 585 阅读

文章标签：

#前端开发 #css

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种简单的CSS技巧，用于实现单行文本在网页元素内的垂直居中显示。通过设置div的高度与行高相等，并应用边框和背景颜色进行视觉效果增强。

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

最主要height要与line-height相同。

imoker.cn（爱摩客）提供的代码片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
  <head>   
    <title> 单行文字实现垂直居中 </title>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <style type="text/css">   
      body { font-size:12px;font-family:tahoma;}   
      div {   
        height:25px;   
        line-height:25px;   
        border:1px solid #FF0099;   
        background-color:#FFCCFF;   
      }   
    </style>   
  </head>   
  <body>   
    <div>现在我们要使这段文字垂直居中显示！</div>   
  </body>   
</html>

完整内容链接如下：

https://zhidao.baidu.com/question/69214815.html?from=commentSubmit#answers236457164