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

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

这是我的＜div＞风格：

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

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

当前回答

CSS3柔性接线盒有一个小小的魔力：

/*重要*/部分{显示：柔性；显示：-webkit flex；}第p节{/*关键部件*/边距：自动；}/*不重要，着色和UI*/部分{高度：200px；宽度：60%；边距：自动；边框半径：20px；边框：3px实心橙色；背景色：金色；}第p节{文本对齐：居中；font-family:Cantarell，Calibri；字体大小：15px；背景色：黄色；边框半径：20px；填充：15px；}<章节><p>我是一个居中的盒子<br/>Flexbox很棒！</p></section>

提示：如果要将文本居中，请将上面标记为“关键部件”的行替换为以下行之一：

仅垂直：边距：自动0；仅水平：边距：0自动；

正如我注意到的，这个技巧也适用于网格（即display:grid）。

2016-12-13 20:09:41

其他回答

.box｛宽度：100%；背景：#000；字体大小：48px；颜色：#FFF；文本对齐：居中；}.高度{线条高度：170px；高度：170px；}.转换｛高度：170px；位置：相对；}.转换p{边距：0；位置：绝对；顶部：50%；左：50%；-ms变换：平移（-50%，-50%）；转换：转换（-50%，-50%）；}<h4>使用高度</h4><div class=“box height”>Lorem ipsum悲哀坐</div><hr/><h4>使用变换</h4><div class=“box transform”><p>Lorem ipsum悲哀坐</p></div>

2017-09-22 12:56:19

.element{position: relative;top: 50%;transform: translateY(-50%);}

将此小代码添加到元素的CSS属性中。太棒了。试试看！

2015-03-15 06:56:53

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

灵活的方法

第二部分{宽度：250px；最小高度：50px；线条高度：50px；文本对齐：居中；边框：1px实心#12346；边距底部：5px；}跨度{显示：内联块；垂直对齐：中间；线高度：正常；}＜div＞<span>Lorem ipsum dolor坐amet，consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet，consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet，consectetur adipiscing elit</span></div>＜div＞<span>Lorem ipsum dolor坐amet，consectetur adipiscing elit</span></div>＜div＞<span>Lorem ipsum dolor坐amet</span></div>＜div＞

2014-08-28 10:11:14

您还可以使用以下财产。

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

2016-04-15 08:28:20

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

推荐文章

最新文章

标签