我试图在页面底部居中放置一个 div，但没有成功。我在网上搜索过，但在尝试应用他们的解决方案时一直没有找到任何结果。
有没有人可能有解决方案？见下面的代码:
<!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>
最佳答案
我想你的意思是，你的 div 将位于页面底部。这将帮助您:
.centerDiv {
display: block;
width: 100%;
margin: 0 auto;
height: auto;
text-align: center;
position: fixed;
bottom: 0;
}
将位置设置为固定，div 将随时停留在某个位置(包括向下滚动时)。
关于html - 在页面底部居中 DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25353649/