我有一个包含文本的＜div＞元素，我想将这个＜div＞的内容垂直居中对齐。
这是我的＜div＞风格：
#盒子{高度：170px；宽度：270px；背景：#000；字体大小：48px；颜色：#FFF；文本对齐：居中；}<div id=“box”>Lorem ipsum悲哀坐</div>
实现这一目标的最佳方式是什么？
当前回答
无论您想要垂直居中样式，都可以尝试显示：表格单元格和垂直对齐：中间。
例子：
#盒子{显示：表格单元格；垂直对齐：中间；高度：90px；宽度：270px；背景：#000；字体大小：48px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；页边空白：20px；左边距：5px；}<div Id=“box”>Lorem ipsum dolor坐amet，consectetur adipiscing elit。</div>
其他回答
无论您想要垂直居中样式，都可以尝试显示：表格单元格和垂直对齐：中间。
例子：
#盒子{显示：表格单元格；垂直对齐：中间；高度：90px；宽度：270px；背景：#000；字体大小：48px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；页边空白：20px；左边距：5px；}<div Id=“box”>Lorem ipsum dolor坐amet，consectetur adipiscing elit。</div>
<!DOCTYPE html>
<html>
<head>
<style>
.main{
height:450px;
background:#f8f8f8;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
justify-content: center;
width: 100%;
}
</style>
</head>
<body>
<div class="main">
<h1>Hello</h1>
</div>
</body>
</html>
这是个更好的主意。你也可以这样做
身体html格式{高度：100%；}.父级{空白：nowrap；高度：100%；文本对齐：居中；}.父项：在之后{显示：内联块；垂直对齐：中间；高度：100%；内容：“”；}.居中{显示：内联块；垂直对齐：中间；空白：正常；}<div class=“parent”><div class=“center”><p>Lorem ipsum dolor坐amet</p＞</div></div>
作为答案被接受的解决方案是完美的，使用与div高度相同的行高度，但当文本被换行或是两行时，此解决方案无法完美工作。
如果文本被换行或在div中的多行上，请尝试此操作。
#box
{
display: table-cell;
vertical-align: middle;
}
有关更多参考信息，请参阅：
垂直居中多行文本CSS垂直居中的6种方法
这是使用Flexbox的另一个选项。
#集装箱{显示：柔性；高度：200px；背景：橙色；}.儿童{边距：自动；}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠，尼莫</span></div></div>
后果
这里有一篇关于CSS居中的好文章。过来看。
