这是我第二次尝试解决这个问题！我在 Stobor 的帮助下解决了第一个问题，现在第二个问题似乎有点棘手，但不会那么难吧？
正如你在这里看到的http://dekkro.no-ip.org/ 我有一个完全居中的图像，以及一个带有登录框的样式 div。
我想要实现的是登录框始终是该图像的 100% 死点。它以我为中心，但对于许多分辨率较小的人来说不是。
这里有问题：http://dekkro.no-ip.org/problem.png
有没有办法解决这个问题？我的代码有点乱但可以理解。我从早上 5 点开始就一直在尝试这样做，现在是下午 5 点！这里有点挣扎！ 谢谢！
【问题讨论】：
标签： html overlay z-index center absolute
在这里...在 Firefox、ie9、chrome 和 opera 中进行了测试。希望这可以解决问题或给您一个开始。
<html>
<head>
<style type='text/css'>
html, body{
margin: 0px; /* some browsers add a margin at the top, get rid of it to have proper positioning */
}
body{
background-image: url('blahbg.png');
}
.Centered{
margin-right: auto;
margin-left: auto;
align: center;
}
.LayoutContainer{
background-image: url('blink.gif');
background-position: bottom left;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
.BodyContainer{
background-image: url('testimage.png');
background-repeat: no-repeat;
margin-top: 50px; /* to bring the layout-body down a bit you want this */
height: 425px;
width: 690px;
}
.MiddleContainer{
text-align: center;
padding-top: 20px;
width: 200px;
}
.LoginContainer{
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 20px;
height: 230px;
}
.InfoContainer{
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 20px;
height: 30px;
}
</style>
</head>
<body>
<div class='LayoutContainer'>
<div class='BodyContainer Centered'>
<div class='MiddleContainer Centered'>
<div class='LoginContainer'><img src='logo.png' /></div>
<div class='InfoContainer'></div>
</div>
</div>
</div>
<body>
</html>
【讨论】：