将DIV放在页面底部居中
[英]Center a DIV at bottom of page
问题描述
I'm trying to center a div at the bottom of the page and having no luck. 
我试图将div放在页面底部居中，但没有运气。 I've scoured the web, but keep turning up nothing when attempting to apply their solutions. 我在网上搜索过，但是在尝试应用其解决方案时一直保持不动。
Any chance anyone out there might have a solution? 任何人在那里都有可能解决的办法吗？ See code below: 参见下面的代码：
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script></script>
<style type="text/css">
body {
background-color: aqua;
height:100%;
min-height:100%;
}
.centerDiv {
display: table;
width:90%;
margin:0 auto;
height:100%;
min-height:100%;
text-align: center;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
</style>
</head>
<body>
<div class="centerDiv">
<div class="box box1" style="background-color:#585858;"> </div>
<div class="box box2" style="background-color:#118C4E;"> </div>
<div class="box box3" style="background-color:#C1E1A6;"> </div>
<div class="box box4" style="background-color:#FF9009;"> </div>
</div>
</body>
</html>
3 个解决方案
解决方案1
2 2014-08-17 21:22:38
I think you mean, that your div will be at the bottom of page. 我认为您的意思是，您的div将在页面底部。 This would help you: 这将帮助您：
.centerDiv {
display: block;
width: 100%;
margin: 0 auto;
height: auto;
text-align: center;
position: fixed;
bottom: 0;
}
Setting position to fixed and div will stay at a place anytime (also when you scroll down). 将position设置为fixed和div会随时保持在某个位置（也向下滚动时）。
解决方案2
1 2014-08-17 21:33:43
The problem you're having is that the box is technically already at the bottom of the page -- the page expands to fit the content, not the window . 您遇到的问题是，该框在技术上已经位于页面底部- 页面会扩展以适合内容，而不是window 。 If you want the box to always be at the bottom of the window , then you need to use position : fixed , and it will be at the bottom of the window no matter how much you scroll or how short/tall the page is. 如果希望框始终位于窗口底部，则需要使用position : fixed ，无论滚动多少或页面多么短/高，它都将位于窗口底部。
See the demo here for the result with the fixed position. 有关固定位置的结果，请参见此处的演示。
.centerDiv {
width:100%;
text-align: center;
position: fixed;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
}
Now, if you want the box to always be at the bottom of the page, except when the page height is less than the window height (in which case it would be at the bottom of the window), you're going to have trouble. 现在，如果您希望框始终位于页面底部，除非页面高度小于窗口高度（在这种情况下它将位于窗口底部），否则您将遇到麻烦。 That's a bit tougher to do with CSS. 使用CSS很难做到这一点。 However, it's easy with jQuery, if you don't mind using scripting: 但是，如果您不介意使用脚本，则使用jQuery很容易：
See the demo here for the result using jQuery. 有关使用jQuery的结果，请参见此处的演示。
var minheight = $(window).height();
$("body").css("min-height", minheight);
and 和
body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
}
.centerDiv {
width:100%;
text-align: center;
position: absolute;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
解决方案3
-2 2014-08-17 21:15:19
div元素具有align属性，因此可以提供帮助：
<div align="center"></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.