我有一个包含文本的＜div＞元素，我想将这个＜div＞的内容垂直居中对齐。
这是我的＜div＞风格：
#盒子{高度：170px；宽度：270px；背景：#000；字体大小：48px；颜色：#FFF；文本对齐：居中；}<div id=“box”>Lorem ipsum悲哀坐</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支持，必须将：：替换为：。
其他回答
简单而通用的方法是表格方法）：
[ctrv]{
display: table !important;
}
[ctrv] > *{ /* Addressing direct descendants */
display: table-cell;
vertical-align: middle;
// text-align: center; /* Optional */
}
在父标记上使用此属性（或等效的类）甚至可以使许多子标记对齐：
<parent ctrv> <ch1/> <ch2/> </parent>
对于单行文本（或单个字符），可以使用以下技术：
当#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支持，必须将：：替换为：。
我不确定是否有人走上了写作模式的道路，但我认为它彻底解决了问题，并得到了广泛的支持：
.垂直{//边框：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%);
}
尝试此解决方案：
.扩展器{位置：绝对；顶部：0px；左：0px；底部：0px；右：0px；宽度：100%；高度：100%；overflow-y：隐藏；overflow-x：隐藏；}.衬垫中心{宽度：100%；高度：100%；显示：-webkit框；显示：-moz框；显示：-ms flexbox；显示：-webkit flex；显示：柔性；-webkit盒子包：中心；-moz盒装：中心；-ms柔性包装：中心；-webkit调整内容：中心；对齐内容：中心；-webkit框对齐：居中；-moz框对齐：居中；-ms flex align:中心；-webkit对齐项目：中心；对齐项目：居中；}<div class=“EXTENDER”><div class=“PADDER-CENTER”><div contentEditable=“true”>编辑此文本</分区></div></div>
使用CSS+构建。
