我有一个包含文本的＜div＞元素，我想将这个＜div＞的内容垂直居中对齐。
这是我的＜div＞风格：
#盒子{高度：170px；宽度：270px；背景：#000；字体大小：48px；颜色：#FFF；文本对齐：居中；}<div id=“box”>Lorem ipsum悲哀坐</div>
实现这一目标的最佳方式是什么？
当前回答
无论屏幕大小或div大小如何，以下代码都会将div放在屏幕中间：
.中央屏幕{显示：柔性；弯曲方向：柱；对齐内容：中心；对齐项目：居中；文本对齐：居中；最小高度：100vh；}<html><head></head><body><div class=“center screen”>我在中心</div></body></html>
请在此处查看有关flex的更多详细信息。
其他回答
您可以使用以下代码段作为参考。这对我来说就像一种魅力：
html，正文{高度：100%；边距：0；填充：0；宽度：100%；}正文{显示：表格；}.居中文本{文本对齐：居中；显示：表格单元格；垂直对齐：中间；}<div class=“居中文本”><h1>是的，这是我的登录页</h1><h2>正在建设中，即将到来</氢气></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>
这是使用Flexbox的另一个选项。
#集装箱{显示：柔性；高度：200px；背景：橙色；}.儿童{边距：自动；}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠，尼莫</span></div></div>
后果
这里有一篇关于CSS居中的好文章。过来看。
所有功劳都归于该链接所有者@Sebastian Ekström link；请仔细检查一下。在行动代码笔中看到它。通过阅读上述文章，我还创建了一个演示小提琴。
只需要三行CSS（不包括供应商前缀），我们就可以借助转换来实现：translateY垂直居中，即使我们不知道它的高度。
CSS属性转换通常用于旋转和缩放元素，但通过其translateY函数，我们现在可以垂直对齐元素。通常，这必须通过绝对定位或设置行高度来完成，但这些要求您知道元素的高度，或者仅适用于单行文本等。
为此，我们写下：
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
这就是你所需要的。这是一种类似于绝对位置方法的技术，但其优点是我们不必在元素上设置任何高度，也不必在父元素上设置位置属性。它可以直接开箱即用，即使在Internet Explorer 9中也是如此！
为了使其更加简单，我们可以将其编写为带有供应商前缀的混合体。
我看到了前面的答案，它们只适用于屏幕的宽度（没有响应）。对于反应灵敏的用户，您必须使用flex。
例子：
div { display:flex; align-items:center; }
