ログインフォームを上下中央に上手く配置できません。

ご質問を見て下さりありがとうございます。

bootstra4.3とHTML５を使用してログインフォームを作成しているのですが、メールアドレスやパスワードを入力するフォームを上下中央に上手く配置できません。

「d-flex align-items-center」などをclassに適用してフォーム部分を上下中央に配置しようとしても全く動かない状態です。

以下がソースコードになります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>FruitPunch</title>

  </head>
  <body>
  <?php require 'commons/header.php'; ?>
  <div class="container">
    <div class="row">
      <div class="col-md-8">
          <div class="card">
            <div class="card-body">
              <form action="" method="post">
                <div class="form-group">
                  <label for="email">メールアドレス：</label>
                  <input type="text" name="email" id="email" class="form-control">
                </div>
                <div class="form-group">
                  <label for="password">パスワード：</label>
                  <input type="password" name="password" id="password" class="form-control">
                </div>
                <input type="submit" class="btn btn-primary btn-block" value="ログイン">
              </form>
            </div>
          </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

よろしければご回答お願い致します。

行動規範の内容に同意します

回答2件

body 要素へ min-vh-100 クラスを付与したうえで、 flexbox を利用することで、質問者さんの実現したいことは可能だと思います (参考, 動作確認用リンク)。

HTML
1<!doctype html>
2<html lang="ja">
3
4  <head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <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">
9
10    <title>FruitPunch</title>
11
12  </head>
13
14  <body class="d-flex flex-column min-vh-100">
15    <?php require 'commons/header.php'; ?>
16    <div class="container my-auto">
17      <div class="row">
18        <div class="col-md-8">
19          <div class="card">
20            <div class="card-body">
21              <form action="" method="post">
22                <div class="form-group">
23                  <label for="email">メールアドレス：</label>
24                  <input type="text" name="email" id="email" class="form-control">
25                </div>
26                <div class="form-group">
27                  <label for="password">パスワード：</label>
28                  <input type="password" name="password" id="password" class="form-control">
29                </div>
30                <input type="submit" class="btn btn-primary btn-block" value="ログイン">
31              </form>
32            </div>
33          </div>
34        </div>
35      </div>
36    </div>
37
38    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
39    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
40    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
41  </body>
42
43</html>

投稿2020/02/09 14:07

s8_chu

総合スコア14731

退会済みユーザー

2020/02/10 00:30

ご回答ありがとうございます。 min-vh-100はビューポートに関するものですが、なぜこれを設定したら中央になるのですか？それと、調べてみてもよくわからなかったのですが、min-vh-100はどういう意味ですか？

s8_chu

2020/02/12 17:11

> min-vh-100はビューポートに関するものですが、なぜこれを設定したら中央になるのですか？高さを指定することで、その範囲での垂直方向における中央寄せを実現しています。 > それと、調べてみてもよくわからなかったのですが、min-vh-100はどういう意味ですか？ `min-vh-100` クラスは `min-height: 100vh` と同様の働きをします。

行動規範の内容に同意します