Html 随着视口高度的降低，垂直对齐的文本聚集在一起

使用基础CSS框架

创建登录页

登录页是任何设备的100%高度：即：html、正文、登录页高度：100%

在登录页中添加了文本

文本垂直居中，位置：绝对，顶部：%

问题：随着视口的高度变小，我的文本会聚集

我的目标是为所有高度和宽度提供响应迅速的登录页面

我的问题解决方案？：当文本聚集时，进行最大高度媒体查询，并通过更改文本的顶部来重新定位文本。但问题是，如果存在以下分辨率的设备：

300 x 300

400 x 300

500 x 300

目前，我有媒体查询，随着宽度的增加，文本的字体大小也会增加

[仅示例]介质最小宽度（40em）介质最小宽度（100em）

但是，如果设备宽度增加，高度保持不变怎么办？这将使我的文本重叠，因为字体大小变大，但高度仍然相同

 <!-- Background --> 
 <div class="row column landing-bg">

    <!-- Info -->
     <h2 class="name">John Star</h2>
     <h3 class="role">Web Developer</h3>
    <!-- Info --> 

 </div>
 <!-- Background --> 

---

我会将它们放在父元素中，然后定位父元素

/************************************
全球的
************************************/
html，正文{
身高：100%；
宽度：100%；
}
.行{
最大宽度：无；
}
/************************************
登录页
************************************/
/*背景*/
.着陆背景{
身高：100%；
宽度：100%；
填充：0；
背景：url（“https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/KADOHF81P4.jpg");
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
背景位置：0.70%；
背景重复：无重复；
}
/*信息*/
.name、.role{
文本转换：大写；
文本对齐：居中；
线高：1；
保证金：0；
}
.姓名{
颜色：#fff；
字母间距：0.7雷姆；
}
.角色{
颜色：#3687be；
字体大小：400；
字体系列：monospace；
}
无名头先生{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

约翰·斯塔
网络开发者

将文本包装在绝对定位的div中，而不是绝对定位h2和h3标记。看看这个：

 <div class="row column landing-bg">

    <!-- Info -->
 <div class="bishment">
       <h2 class="name">John Star</h2>
       <h3 class="role">Web Developer</h3>
 </div>
    <!-- Info --> 

 </div>



.bishment {
  width:100%;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);

}

约翰·斯塔
网络开发者
bishment先生{
宽度：100%；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}

---

谢谢，我注意到如果我取出变换器。前50%的人没有垂直居中。我必须把它放在43%以上。这是为什么？以这种方式重新定位时，应始终使用变换。仅使用“顶部”将did相对于其角而不是其中心定位，只是一个平头，Varin和我留下了相同的答案，但Varin在我回答后大约6分钟回答。如果您选择最有帮助的答案，它将帮助社区，如果有多个答案相同，请选择第一个答案。一些回答问题的人可能只是抄袭别人的答案，同样的答案如果只留下一次以上是没有帮助的——如果我们不奖励那些可能会这样做的人，这是有帮助的。

 <div class="row column landing-bg">

    <!-- Info -->
 <div class="bishment">
       <h2 class="name">John Star</h2>
       <h3 class="role">Web Developer</h3>
 </div>
    <!-- Info --> 

 </div>



.bishment {
  width:100%;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);

}