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

这是我的<div>风格:

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

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


当前回答

这很简单,也很短:

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

其他回答

一种更好、更简单、更快速的方法是将CSS中的页边空白设置为45%左右:

margin-top: 45%;

你可能需要玩这个数字,但它将位于周围分区的中心。

灵活的方法

第二部分{宽度: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>

作为答案被接受的解决方案是完美的,使用与div高度相同的行高度,但当文本被换行或是两行时,此解决方案无法完美工作。

如果文本被换行或在div中的多行上,请尝试此操作。

#box
{
  display: table-cell;
  vertical-align: middle;
}

有关更多参考信息,请参阅:

垂直居中多行文本CSS垂直居中的6种方法

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

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

您还可以使用以下财产。

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