我想将 HTML 中的一个 div 元素垂直对齐到视口(viewport)的底部，同时将同一个 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，它贴在视口(viewport)的底部，但与显示的 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>
只要视口(viewport)宽度大于 1000 像素，此解决方案就有效。一旦窗口小于 1000px，解决方案就会失效；页脚不再与页面的其余部分一起水平滚动。另请注意，如果文档比视口(viewport)“高”，则页脚 div 应保持固定在视口(viewport)底部。
最佳答案
你应该为此使用两个 div。第一个在页面底部与样式对齐:
.wrapper {
position: absolute;
bottom:0;
width: 100%;
background-color: red;
}
然后 footer-wrapper 包含的页脚包含您的实际页脚信息(我将您想要在页面底部对齐的页脚称为页脚...
.footer {
width: 50%;
margin: 0 auto;
background-color: green;
}
查看实际效果:
关于css - 如何将 div 与视口(viewport)垂直对齐，同时将其与文档水平对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9801204/