Css 在爱奥尼亚垂直中心的内容？

我希望能够在屏幕上垂直居中显示大部分内容：

比如说

• 形式
• 钮扣

这可以通过一些自定义css类实现吗

现在我正在使用下面的代码。它的工作，但不是很好，因为我选择的百分比，内容将开始。因此，我需要一个这些为每一页，如果内容变得更长，我必须修改的百分比

.loginForm .scroll {
  height: 100%;
}
.loginForm .loginForm-wrapper {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
}

---

有不同的方法垂直居中内容。我经常使用

转换
的方法。假设有一个容器，其中另一个元素应该居中


.container{
位置：相对；/*必需*/
高度：150像素；
宽度：100px；
背景：#efef；
文本对齐：居中；
边界半径：4px；
}
.把我放在中间{
显示：块；
字体系列：Consolas；
字体大小：12px；
填充物：5px10px；
背景：#000；
颜色：#fff；
边界半径：4px；
位置：绝对；/*必需*/
顶部：50%；/*必需*/
左：50%；
转换：
translateY（-50%）/*必需*/
translateX（-50%）；
}

居中
你可以用一点JS来做一些事情，尽管我认为@Jan Unld的答案已经足够了


calcMiddle=函数（）{
var middleObject=document.querySelector（“#middle”），
middleHeight=middleObject.clientHeight/2，
中间窗=window.innerHeight/2，
中间距=中间窗-中间高度；
middleObject.style.marginTop=middleMargin+px；
};
calcmidle（）
正文{
保证金：0；
}
#中间的{
填充：10px；
背景：#abcabc；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种新的生命。毛里斯在rutrum酒后驾车。这是一对菱形和等分菱形的分子。不，不，不，不，不，不，不。安尼安·艾库利斯·维尼那提·阿利夸姆·波特提托。这是一种自由，而不是一种善意。Donec使用ipsum nibh。前庭坐在同侧前方。梅塞纳·维韦拉·奥克托·奥奇（Maecenas viverra auctor orci）和塞勒里克·埃尼姆·康格（enim congue）等人

这对我的代码不起作用。我对所有字段都进行了尝试，但只对所需字段进行了尝试。内容最终被压缩到左上角。这是我的HTML，这样你就可以看到我做错了什么：这是我尝试过的最新CSS：。容器{位置：相对；/*必需/高度：100%；}。中间我{显示：块；位置：绝对；/必需/顶部：50%；/required/translateY（-50%）/required*/}你不必使用JavaScript来实现这一点。您可以使用纯CSS