我无法成功使用 "row vertical-align"。 Bootstrap/HTML

Question

我正在创建一个登录页面 (Python/Flask)，登录表单将是该页面上显示的唯一元素。我希望该表格水平和垂直居中。我设法将它水平居中，但我无法弄清楚垂直对齐方式。

我找到了这个有用的答案 -> vertical-align with Bootstrap 3，但我的大脑无法理解它。

我也不确定我是否正确引用了 main.css 文件，并且完全不确定如何引用 main.css 中的容器以垂直对齐。

我的文件结构：

________________________________
|Flask -
|      |_flask_app.py
|      |_static_
|               |_css_
|                     |_main.css
|               |_images_
|                        |...
|      |_templates_
|                  |_index.html
|                  |_login.html
________________________________

这是我的 HTML:

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>LoginPage</title>
        <meta charset="utf-8">

        <!-- For rendering and touch zooming -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="container">
            <div class="row vertivcal-align">
                <div class="col-xs-12"></div>
                    <div class="span12 text-center">
                        <h1>Please login</h1>
                        <br>
                        <form action="" method="post">
                            <input type="text" placeholder="Username" name="username" value="{{
                            request.form.username }}">
                            <input type="password" placeholder="Password" name="password" value="{{
                            request.form.password }}">
                            <input class="btn btn-default" type="submit" value="Login">
                        </form>
                        {% if error %}
                            <p class="error"><strong>Error:</strong> {{ error }}
                        {% endif %}
                    </div>
                </div>    
            </div>
        </div>
    </body>
</html>

这是我的 main.css

.container {
    width: 1200px;
    margin: 0 auto;
  }

.vertical-align {
    display: flex;
    align-items: center;
}

Answer 1

您可以使用以下 CSS 并将 class m-auto 添加到您的 div span12

.vertical-align {
    height:100vh
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">
        <div class="row vertical-align">
            <div class="col-xs-12"></div>
                <div class="span12 text-center m-auto">
                    <h1>Please login</h1>
                    <br>
                    <form action="" method="post">
                        <input type="text" placeholder="Username" name="username" value="">
                        <input type="password" placeholder="Password" name="password" value="">
                        <input class="btn btn-default" type="submit" value="Login">
                    </form>
                </div>
            </div>    
        </div>

我无法成功使用 "row vertical-align"。 Bootstrap/HTML

I'm unable to sucsessfully use "row vertical-align". Bootstrap/HTML

html

css

twitter-bootstrap-3