我想将HTML中的div元素垂直对齐到视口的底部，但也要将同一div水平对齐到文档/页面或其元素。
例如，假设我有一个div：
<html>
<head>
<style type="text/css">
* {
margin: 0;
}
#wrapper {
margin: 0 auto;
width: 1000px;
min-height: 2000px;
background: #FF0000;
}
</style>
</head>
<body>
<div id="wrapper">wrapper</div>
</body>
</html>
我想制作一个新的div，它被固定在视口的底部，但与所示的div对齐。为了简洁起见，让我们假设我要对齐的div与所示的宽度相同，并且我希望将其与所示左对齐。
我天真的尝试如下：
<html>
<head>
<style type="text/css">
* {
margin: 0;
}
#wrapper {
margin: 0 auto;
width: 1000px;
min-height: 2000px;
background: #FF0000;
}
#footer {
position: fixed;
bottom: 0;
left: 50%;
width: 1000px;
height: 100px;
margin-left: -500px;
background: #00FF00;
}
</style>
</head>
<body>
<div id="wrapper">wrapper</div>
<div id="footer">footer</div>
</body>
</html>
只要视口宽度大于1000px，此解决方案就可以工作。一旦窗口小于1000px，解决方案就会崩溃；页脚不再与页面的其余部分一起水平滚动。还要注意，如果文档比视口"高"，则页脚div应保持固定在视口的底部。
您应该为此使用两个div。第一个在页面底部与样式对齐：
.wrapper {
position: absolute;
bottom:0;
width: 100%;
background-color: red;
}
然后页脚包装器包含的页脚包含您的实际页脚信息（我称之为您想在页面底部对齐的页脚…
.footer {
width: 50%;
margin: 0 auto;
background-color: green;
}
看看它在行动：
http://jsfiddle.net/C3rhX/1/
<html>
<head>
<style type="text/css">
* {
margin: 0;
}
#outer
{
width: 1000px;
margin: 0 auto;
height: 100%;
}
#wrapper {
min-height: 800px;
background: red;
}
#footer {
position: absolute;
bottom: 0;
width: 1000px;
height: 100px;
background: lime;
display: block;
}
</style>
</head>
<body>
<div id="outer">
<div id="wrapper">wrapper</div>
<div id="footer">footer</div>
</div>
</body>
</html>