[英]CSS: position a div element vertically and horizontally in the center, position footer at the bottom
对于不应该那么困难的事情，我的行为越来越奇怪。 所以我在这里有两个目标。 我需要页脚实际上看起来像页脚并位于页面底部。 同时，我希望具有“ .center_div”类的div位于页面的垂直和水平中心。
我已经从其他在线解决方案中复制并粘贴了CSS，希望它最终可以工作，但是...我没有成功。 我将继续让Google搜索以尝试找到更多解决方案，我只是对自己的代码可能出了问题感到困惑。
我的html的相关位如下。 我包括正在使用的css cdns，以防万一这些实际上是问题的根源。 另请注意，这是一个烧瓶应用程序：
#page-container { position: relative; min-height: 100vh; } .center_div { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 800px; } #footer { position: absolute; bottom: 0; width: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Bootstrap css and other basic formatting --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Material Design Bootstrap --> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.9/css/mdb.min.css" rel="stylesheet"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div id="page-container"> <div class="center_div"> <h1>Cognitive Functions and Risk Assessment Task Prototype</h1> <p>Please enter the number of trials that you would like to have in the following field (any number from 1-100) then click submit</p> <form id="Trial_Form" action="/experiment_app" , method="post"> <input type="number" name="trials" min="1" max="100"> <input type="submit"> <script> $("#Trial_Form").submit(function(event) { alert("ALEEEEEEEEEEEEEERT"); }); </script> </form> <p>Upon clicking submit, the experimental application will be launched. Each trial will display as an interactive page using the JsPsych framework.</p> </div> <footer id="footer" class="page-footer unique-color"> <img src="{{ url_for('static', filename='images/cognew_logo.png')}}"> </footer> </div>
结果吸引了我...
这是一个小提琴演示，其中包含我的完整html和css文件。 http://jsfiddle.net/vuz6Lp1d/1/
还奇怪的是，我的屏幕截图与我的代码的js小提琴版本并不完全一样。 屏幕截图显示页脚位于页面顶部。 div是“居中的”，因为它位于页面的中心，但是它显然向右偏斜/没有右侧的填充。
编辑1
我得到的解决方案效果不佳。 我试图使事情变得更基础。 我看到这段代码显然不正确...是的，我只是花了一些时间进行故障排除，并在栈溢出时将我上次从另一篇文章中复制/粘贴的内容发布到同一问题上。 他们的情况可能甚至不适用于我，我正在尽我所能。
这很有趣。 margin: 0 auto; 仅将div居中放置，而不是垂直放置。 margin: auto 0; 信不信由你...根本不起作用。 div停留在左上方。 这是我用margin: auto 0;检查元素的屏幕截图margin: auto 0;
所以现在我只是坚持使用margin: 0 auto 。 这仅将<div>元素垂直居中。 我的页脚现在像往常一样位于页面底部。
CSS现在就是
.center-div {
width:800px;
margin: 0 auto;
}
在您的.center_div ，尝试此操作
position: absolute;
top: 50%;
left: 50%;
transform: translate (-50%,-50%);
另外，例如，您可以使用flex将div及其内容居中
display: flex;
justify-content: center:
align-items: center;
所有浏览器都支持的另一种选择是使用边距。
希望能帮助到你。
这应该工作！
body { padding-bottom: 40px; /*height of the footer*/ } #page-container { position: relative; min-height: 100vh; } .center_div { position: relative; top: 50%; left: 25%; right: 25%; margin-top: -50px; margin-left: -50px; width: 50%; padding-bottom: 40px; } #footer { position: fixed; bottom: 0; left: 0; height: 40px; width: 100%; }
<!DOCTYPE html> <html> <head> <title>Experiment Welcome Page</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="{{ url_for('static', filename='jspsych.css') }}" rel="stylesheet" type="text/css"> <link href="{{url_for('static', filename='style.css') }}" rel="stylesheet" type="text/css"> <!-- Bootstrap css and other basic formatting --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Material Design Bootstrap --> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.9/css/mdb.min.css" rel="stylesheet"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <div id="page-container"> <div class="center_div"> <h1>Cognitive Functions and Risk Assessment Task Prototype</h1> <p>Please enter the number of trials that you would like to have in the following field (any number from 1-100) then click submit</p> <form id="Trial_Form" action="/experiment_app" , method="post"> <input type="number" name="trials" min="1" max="100"> <input type="submit"> </form> <p>Upon clicking submit, the experimental application will be launched. Each trial will display as an interactive page using the JsPsych framework.</p> </div> <footer id="footer" class="page-footer unique-color"> <img src="{{ url_for('static', filename='images/cognew_logo.png')}}"> </footer> </div> </body> <script> $("#Trial_Form").submit(function(event) { alert("ALEEEEEEEEEEEEEERT"); }); </script> </html>
javascript-垂直和水平居中div（位置：绝对）到屏幕视图
[英]javascript - center div (position:absolute) vertically and horizontally to screen view
CSS位置已修复。 Div包装器必须垂直固定，但必须水平变化
[英]CSS position fixed. Div wrapper must be fixed vertically but must be varying in horizontally
通过打开/隐藏元素时将页脚保持在同一位置来垂直扩展DIV
[英]Expand DIV vertically by keeping the footer at the same position when open/hide element
使用纯JavaScript或纯CSS将中心表格和div垂直和水平放置
[英]center form and div horizontally and vertically using pure javascript or pure css
如何使用 javascript 和 css 边距垂直和水平居中 div？
[英]How to vertically and horizontally center a div using javascript and css margin?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.