javascript - CSS:将div元素垂直和水平放置在中心，将页脚放在底部

Question

对于本不应该那么困难的事情，我却出现了奇怪的行为。所以我在这里有两个目标。我需要页脚看起来像页脚并位于页面底部。同时，我希望类为“.center_div”的 div 位于页面的垂直和水平中心。

我已经从其他在线解决方案中复制并粘贴了 css，希望它最终能够工作，但是......我没有成功。我将继续在谷歌上搜索以尝试找到更多解决方案，我只是对我的代码可能出现的问题感到困惑。

我的 html 的相关部分如下。我包括我正在使用的 css cdns，以防万一它们实际上是问题的根源。另请注意，这是一个 flask 应用程序:

 

   #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>

它带给我的结果是......

这是一个 fiddle 演示，其中包含我的完整 html 和 css 文件。 http://jsfiddle.net/vuz6Lp1d/1/

同样奇怪的是，我的屏幕截图看起来并不完全像我的代码的 js fiddle 版本。屏幕截图显示页脚位于页面顶部。 div 是“居中”的，因为它位于页面的中心，但它显然偏向右侧/没有右侧所需的填充。

编辑 1

我得到的解决方案不太奏效。我试着让事情变得更基本一点。 我清楚地看到这段代码可能是不正确的……是的，我刚刚花了一些时间进行故障排除，并发布了我上次从另一篇关于堆栈溢出的帖子中复制/粘贴的内容，但有同样的问题。他们的情况可能并不完全适用于我，我正在尽我所能。

这很有趣。 margin: 0 auto;仅将 div 水平居中，而不是垂直居中。 margin: auto 0;信不信由你......根本不起作用。 div 只停留在左上角。这是我用 margin: auto 0; 检查元素的屏幕截图

所以现在我只是坚持使用 margin: 0 auto .这只会将 <div> 垂直居中元素。我的页脚现在像往常一样位于页面底部。

CSS 现在只是

.center-div { 
width:800px;
margin: 0 auto;
}

Answer 1

在你的 .center_div 中，试试这个

position: absolute;
top: 50%;
left: 50%;
transform: translate (-50%,-50%);

另外，你可以只使用 flex 来居中你的 div 和它的内容，例如

display: flex;
justify-content: center:
align-items: center;

所有浏览器都支持的另一种选择是使用边距。

希望对您有所帮助。