我有一个包含文本的＜div＞元素，我想将这个＜div＞的内容垂直居中对齐。
这是我的＜div＞风格：
#盒子{高度：170px；宽度：270px；背景：#000；字体大小：48px；颜色：#FFF；文本对齐：居中；}<div id=“box”>Lorem ipsum悲哀坐</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>
其他回答
这非常有效。
您必须为div使用表样式，为内容使用居中对齐。
一种更好、更简单、更快速的方法是将CSS中的页边空白设置为45%左右：
margin-top: 45%;
你可能需要玩这个数字，但它将位于周围分区的中心。
您可以尝试以下基本方法：
第二部分{高度：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>
我不确定是否有人走上了写作模式的道路，但我认为它彻底解决了问题，并得到了广泛的支持：
.垂直{//边框：1px实心绿色；写入模式：垂直lr；文本对齐：居中；高度：100%；宽度：100%；}.水平{//边框：1px纯蓝色；显示：内联块；书写方式：水平tb；宽度：100%；文本对齐：居中；}.内容{文本对齐：左侧；显示：内联块；边框：1px实心#e0e0e0；衬垫：.5em 1em；边界半径：1em；}<div class=“vertical”><div class=“horizontal”><div class=“content”>我以垂直和水平为中心</div></div></div>
当然，这将适用于您需要的任何维度（除了100%的父维度）。如果取消注释边界线，这将有助于熟悉自己。
JSFiddle演示供您摆弄。
犬只支持：85.22%+6.26%=91.48%（甚至Internet Explorer也支持！）
您可以在CSS中使用定位方法：
检查此处的结果。。。。
HTML格式：
<div class="relativediv">
<p>
Make me vertical align as center
</p>
</div>
CSS:
.relativediv {
position: relative;
border: 1px solid #DDD;
height: 300px;
width: 300px
}
.relativediv p {
position: absolute;
top: 50%;
transfrom: translateY(-50%);
}
