如何使用CSS垂直居中文本？

我有一个包含文本的＜div＞元素，我想将这个＜div＞的内容垂直居中对齐。

这是我的＜div＞风格：

#盒子{高度：170px；宽度：270px；背景：#000；字体大小：48px；颜色：#FFF；文本对齐：居中；}<div id=“box”>Lorem ipsum悲哀坐</div>

实现这一目标的最佳方式是什么？

当前回答

这是个更好的主意。你也可以这样做

身体html格式{高度：100%；}.父级{空白：nowrap；高度：100%；文本对齐：居中；}.父项：在之后{显示：内联块；垂直对齐：中间；高度：100%；内容：“”；}.居中{显示：内联块；垂直对齐：中间；空白：正常；}<div class=“parent”><div class=“center”><p>Lorem ipsum dolor坐amet</p＞</div></div>

2018-05-24 11:01:02

其他回答

您可以通过添加以下CSS代码轻松完成此操作：

display: table-cell;
vertical-align: middle;

这意味着您的CSS最终看起来像：

#盒子{高度：90px；宽度：270px；背景：#000；字体大小：48px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；页边空白：20px；左边距：5px；显示：表格单元格；垂直对齐：中间；}<div id=“box”>一些文本</div>

2012-01-14 21:29:54

较新的浏览器现在支持CSS calc功能。如果您针对的是这些浏览器，您可能需要考虑这样做：

<div style=“位置：相对；宽度：400px；高度：400px，背景色：红色”><span style=“位置：绝对；行高：40px；高度：80px；文本对齐：居中；宽度：300px；溢出：隐藏；顶部：计算（50%-40px）；左侧：计算（50%-150px）；”>这里有两条线，即使父div改变大小，也会居中。</span></div>

关键是在绝对或相对定位的父除法中使用style=“top:calc（50%-[inerFixedHeightInPX/2]px）；height:[inerFixed HeightInPX；”。

2015-09-18 17:38:01

这是个更好的主意。你也可以这样做

2018-05-24 11:01:02

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>

2017-03-17 05:00:33

.text{
   background: #ccc;
   position: relative;
   float: left;
   text-align: center;
   width: 400px;
   line-height: 80px;
   font-size: 24px;
   color: #000;
   float: left;
 }

2016-09-05 05:39:51

如何使用CSS垂直居中文本？

推荐文章

最新文章

标签