html - 我的div在较小的分辨率下变得不对齐了吗？

仅使用HTML和CSS。

所以我有一个很大的背景图像。
我不要难看的水平滚动条
我将bg图片宽度设置为：100％；

我在所有字体（甚至字体大小）上都使用了百分数。
但是，无论我做什么，文本都会以较小的分辨率在页面上显示。

当分辨率较小时，背景图像也较小，因此div变得与背景不对齐？

我无法使其看起来居中，而无法以较小的分辨率从屏幕上移开。

请说明我做错了什么以及解决方案。

这是到目前为止的基本代码：

<img src="http://i.imgur.com/Kl5fDHa.png" class="dead" style="position: fixed;">

<img src="http://imageshack.com/a/img924/5227/cxz6vT.png" id="vacant" style="position: absolute;">



<style>

#vacant {
top: 0;
left: 0;
width: 100%;
height: auto; }

.dead {
top: 0;
left: 0;
width: 100%;
height: 100%; }

body {
background: #071b41; }

.blink {
top: 166%;
left: 38%;
color: #66799b;
font-family: Times New Roman;
font-size: 80%;
height: 3620px;
overflow: hidden; }

</style>

<div class="blink" style="position: absolute;">
<center>

Lorem ipsum dolor sit amet, <br>
consectetur adipiscing elit. <br><br>

Fusce venenatis tortor at diam tempus, <br>
at gravida arcu placerat. <br>
Donec varius placerat justo in consequat. <br>
Ut hendrerit tellus id ultrices tincidunt. <br><br>

（文本继续在屏幕中央向下移动）
但在较小的分辨率下却无法实现。

最佳答案

这是一个琐碎而简单的问题。您所要做的就是从类position: absolute;（div）中的blink中删除​​<div class="blink"><!--...--></div>属性。



这是jsfiddle。