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

这是我的<div>风格:

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

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


当前回答

我需要一排可点击的大象,垂直居中,但不用桌子来绕过一些InternetExplorer9的奇怪之处。

我最终找到了最好的CSS(满足我的需要),它与Firefox、Chrome和InternetExplorer11非常配合。遗憾的是,Internet Explorer 9仍然在嘲笑我。。。

第二部分{边框:1px蓝色虚线;显示:内联;线条高度:100px;高度:100px;}跨度{边框:1px纯红色;显示:内联块;线高度:正常;垂直对齐:中间;}.输出{边框:3px纯银;显示:内联块;}<div class=“out”onclick=“alert(1)”><div><span><img src=“http://www.birdfolk.co.uk/littleredsolo.png“/></span></div><div><span>一个可爱的可点击选项</span></div></div><div class=“out”onclick=“alert(2)”><div><span><img src=“http://www.birdfolk.co.uk/bang2/Ship01.png“/></span></div><div><span>点击一些迷人的东西。</span></div></div>

显然,你不需要边界,但它们可以帮助你了解它是如何工作的。

其他回答

一个非常简单和最强大的垂直对齐中心的解决方案:

.外部div{高度:200px;宽度:200px;文本对齐:居中;边框:1px实心#000;}.内部{位置:相对;顶部:50%;变换:translateY(-50%);颜色:红色;}<div class=“outer div”><span class=“inner”>无可用数据</span></div>

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

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

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

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

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

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

您可以尝试以下基本方法:

第二部分{高度:100px;线条高度:100px;文本对齐:居中;边框:2px虚线#f69c55;}<div>你好,世界!</div>

但它只适用于单行文本,因为我们将行的高度设置为与包含框元素相同的高度。


更通用的方法

这是垂直对齐文本的另一种方式。此解决方案适用于单行和多行文本,但仍需要固定高度的容器:

第二部分{高度:100px;线条高度:100px;文本对齐:居中;边框:2px虚线#f69c55;}跨度{显示:内联块;垂直对齐:中间;线高度:正常;}<div><span>你好,世界</span></div>

CSS只是调整<div>的大小,通过将<div>线的高度设置为等于其高度来垂直居中对齐<span>,并使<span>成为具有垂直对齐:中间的内联块。然后,它将<span>的线高度设置回正常值,因此其内容将在块内自然流动。


模拟表显示

这里还有另一个选项,它可能在不支持display:table和display:tablecell(基本上只有InternetExplorer7)的旧浏览器上不起作用。使用CSS,我们模拟表行为(因为表支持垂直对齐),HTML与第二个示例相同:

第二部分{显示:表格;高度:100px;宽度:100%;文本对齐:居中;边框:2px虚线#f69c55;}跨度{显示:表格单元格;垂直对齐:中间;}<div><span>你好,世界</span></div>


使用绝对定位

该技术使用绝对定位的元素,将顶部、底部、左侧和右侧设置为0。这在《粉碎杂志》的一篇文章中有更详细的描述,《CSS中的绝对水平和垂直居中》。

第二部分{显示:柔性;对齐内容:中心;对齐项目:居中;高度:100px;宽度:100%;边框:2px虚线#f69c55;}<div><span>你好,世界</span></div>

您还可以使用以下财产。

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