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

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

这是我的＜div＞风格：

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

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

当前回答

尝试转换属性：

#盒子{高度：90px；宽度：270px；位置：绝对；顶部：50%；左：50%；转换：转换（-50%，-50%）；}<div Id=“box”>Lorem ipsum dolor坐amet，consectetur adipiscing elit。</div>

2016-09-27 13:40:08

其他回答

这很简单，也很短：

.块{显示：表格行；垂直对齐：中间；}.平铺{显示：表格单元格；垂直对齐：中间；文本对齐：居中；宽度：500px；高度：100px；}<div class=“body”><span class=“tile”>你好，中间世界！：）</span></div>

2018-08-20 07:50:18

<!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

您还可以使用以下财产。

display: flex; 
align-content: center; 
justify-content : center;

2016-04-15 08:28:20

我看到了前面的答案，它们只适用于屏幕的宽度（没有响应）。对于反应灵敏的用户，您必须使用flex。

例子：

div { display:flex; align-items:center; }

2018-02-28 06:25:34

另一种方式：

不要设置div的height属性，而是使用padding:来实现效果。与行高度类似，它仅在您有一行文本时有效。尽管这样，如果您有更多的内容，文本仍然会居中，但div本身会稍微大一些。

因此，与其继续：

div {
  height: 120px;
  line-height: 120px;
}

你可以说：

div {
   padding: 60px 0; /* Maybe 60 minus font-size divided by two, if you want to be exact */
}

这会将div的顶部和底部填充设置为60px，左侧和右侧填充设置为零，使div高120像素（加上字体的高度），并将文本垂直居中放置在div中。

2014-09-28 18:07:30

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

推荐文章

最新文章

标签