我有一个包含文本的＜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>
其他回答
您可以尝试以下基本方法：
第二部分{高度：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>
您可以通过添加以下CSS代码轻松完成此操作：
display: table-cell;
vertical-align: middle;
这意味着您的CSS最终看起来像：
#盒子{高度：90px；宽度：270px；背景：#000；字体大小：48px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；页边空白：20px；左边距：5px；显示：表格单元格；垂直对齐：中间；}<div id=“box”>一些文本</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>
显然，你不需要边界，但它们可以帮助你了解它是如何工作的。
对于单行文本（或单个字符），可以使用以下技术：
当#box具有非固定的相对高度（以%为单位）时，可以使用它。
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
在JsBin（更容易编辑CSS）或JsFiddle（更容易更改结果框的高度）观看现场演示。
如果你想将内部文本放在HTML中，而不是CSS中，那么你需要将文本内容包装在额外的内联元素中，然后编辑#box:：after以匹配它。（当然，content:property应该被删除。）
例如<div id=“box”><span>文本内容</span></div>。在这种情况下，#box：：after应替换为#box span。
对于Internet Explorer 8支持，必须将：：替换为：。
.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>
