ログインフォームが右に寄ってしまう

前提・実現したいこと

ログインフォームを中央に表示させる

発生している問題・エラーメッセージ

ログインフォームをBootstrapで製作したのですが、何故か右端フォームが表示されてしまいます。

該当のソースコード

login.php
1<!DOCTYPE html>
2<style>
3html,
4body {
5  height: 100%;
6}
7
8body {
9  display: -ms-flexbox;
10  display: flex;
11  -ms-flex-align: center;
12  align-items: center;
13  padding-top: 40px;
14  padding-bottom: 40px;
15  background-color: #f5f5f5;
16}
17
18.form-signin {
19  width: 100%;
20  max-width: 420px;
21  padding: 15px;
22  margin: auto;
23}
24
25.form-label-group {
26  position: relative;
27  margin-bottom: 1rem;
28}
29
30.form-label-group > input,
31.form-label-group > label {
32  height: 3.125rem;
33  padding: .75rem
34}
35
36.form-label-group > label {
37  position: absolute;
38  top: 0;
39  left: 0;
40  display: block;
41  width: 100%;
42  margin-bottom: 0; /* デフォルトの `<label>` margin を上書き */
43  line-height: 1.5;
44  color: #495057;
45  pointer-events: none;
46  cursor: text; /* ラベルの下の入力と一致させる */
47  border: 1px solid transparent;
48  border-radius: .25rem;
49  transition: all .1s ease-in-out;
50}
51
52.form-label-group input::-webkit-input-placeholder {
53  color: transparent;
54}
55
56.form-label-group input:-ms-input-placeholder {
57  color: transparent;
58}
59
60.form-label-group input::-ms-input-placeholder {
61  color: transparent;
62}
63
64.form-label-group input::-moz-placeholder {
65  color: transparent;
66}
67
68.form-label-group input::placeholder {
69  color: transparent;
70}
71
72.form-label-group input:not(:placeholder-shown) {
73  padding-top: 1.25rem;
74  padding-bottom: 1.25rem;
75}
76
77.form-label-group input:not(:placeholder-shown) ~ label {
78  padding-top: .25rem;
79  padding-bottom: .25rem;
80  font-size: 12px;
81  color: #777;
82}
83
84/* Edge用フォールバック
85-------------------------------------------------- */
86@supports (-ms-ime-align: auto) {
87  .form-label-group > label {
88    display: none;
89  }
90  .form-label-group input::-ms-input-placeholder {
91    color: #777;
92  }
93}
94
95/* IE10-11用フォールバック
96-------------------------------------------------- */
97@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
98  .form-label-group > label {
99    display: none;
100  }
101  .form-label-group input:-ms-input-placeholder {
102    color: #777;
103  }
104}
105</style>
106
107<?php
108require 'password.php';   // password_verfy()はphp 5.5.0以降の関数のため、バージョンが古くて使えない場合に使用
109// セッション開始
110session_start();
111
112$db['host'] = "localhost";  // DBサーバのURL
113$db['user'] = "hogeUser";  // ユーザー名
114$db['pass'] = "hogehoge";  // ユーザー名のパスワード
115$db['dbname'] = "loginManagement";  // データベース名
116
117// エラーメッセージの初期化
118$errorMessage = "";
119
120// ログインボタンが押された場合
121if (isset($_POST["login"])) {
122    // 1. ユーザIDの入力チェック
123    if (empty($_POST["userid"])) {  // emptyは値が空のとき
124        $errorMessage = 'ユーザーIDが未入力です。';
125    } else if (empty($_POST["password"])) {
126        $errorMessage = 'パスワードが未入力です。';
127    }
128
129    if (!empty($_POST["userid"]) && !empty($_POST["password"])) {
130        // 入力したユーザIDを格納
131        $userid = $_POST["userid"];
132
133        // 2. ユーザIDとパスワードが入力されていたら認証する
134        $dsn = sprintf('mysql: host=%s; dbname=%s; charset=utf8', $db['host'], $db['dbname']);
135
136        // 3. エラー処理
137        try {
138            $pdo = new PDO($dsn, $db['user'], $db['pass'], array(PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION));
139
140            $stmt = $pdo->prepare('SELECT * FROM userData WHERE name = ?');
141            $stmt->execute(array($userid));
142
143            $password = $_POST["password"];
144
145            if ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
146                if (password_verify($password, $row['password'])) {
147                    session_regenerate_id(true);
148
149                    // 入力したIDのユーザー名を取得
150                    $id = $row['id'];
151                    $sql = "SELECT * FROM userData WHERE id = $id";  //入力したIDからユーザー名を取得
152                    $stmt = $pdo->query($sql);
153                    foreach ($stmt as $row) {
154                        $row['name'];  // ユーザー名
155                    }
156                    $_SESSION["NAME"] = $row['name'];
157                    header("Location: Main.php");  // メイン画面へ遷移
158                    exit();  // 処理終了
159                } else {
160                    // 認証失敗
161                    $errorMessage = 'ユーザーIDあるいはパスワードに誤りがあります。';
162                }
163            } else {
164                // 4. 認証成功なら、セッションIDを新規に発行する
165                // 該当データなし
166                $errorMessage = 'ユーザーIDあるいはパスワードに誤りがあります。';
167            }
168        } catch (PDOException $e) {
169            $errorMessage = 'System Error';
170            //$errorMessage = $sql;
171            // $e->getMessage() でエラー内容を参照可能（デバッグ時のみ表示）
172            // echo $e->getMessage();
173        }
174    }
175}
176?>
177<head>
178  <meta charset="utf-8">
179  <meta name="viewport" content="width=device-width, initial-scale=1">
180  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
181</head>
182
183<body>
184</div>
185<div class="form-label-group">
186  <form id="loginForm" name="loginForm" action="" method="POST">
187    <div class="text-center mr-4"><?php echo htmlspecialchars($errorMessage, ENT_QUOTES); ?>
188      <img class="mb-4" src="../images/bootstrap-solid.svg" alt="" width="72" height="72">
189      <h1 class="h3 mb-3 font-weight-normal">CLANE STAR ONLINE</h1>
190      <p>ゲームで遊ぶ為には、ログインしてください。</p>
191<br>
192    <div class="form-label-group">
193      <input type="text" id="userid" name="userid" placeholder="ユーザーIDを入力" value="<?php if (!empty($_POST["userid"])) {echo htmlspecialchars($_POST["userid"], ENT_QUOTES);} ?>">
194      <label for="inputEmail">ユーザー名</label>
195    </div>
196
197    <div class="form-label-group">
198      <input type="password" id="password" name="password" value="" placeholder="パスワードを入力">
199      <label for="inputPassword">パスワード</label>
200    </div>
201    <button class="btn btn-lg btn-primary btn-block" id="login" name="login" value="ログイン" type="submit">ログイン</button>
202	<p>アカウントがありませんか?   <a href="http://localhost/clane/online/mypage/SignUp.php">アカウントを作る</a></p>
203    <p class="mt-5 mb-3 text-muted text-center">&copy; 2019-2020</p>
204	</div>
205	</div>
206  </form>
207</body>
208
209</html>

試したこと

<body>を<body class="text-center">に変更した。 (body内のテキスト等は中央寄せにされると思った為)

補足情報（FW/ツールのバージョンなど）

localhost
ご回答よろしくお願いします。

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

回答2件

ベストアンサー

mx-auto クラスを用いることで中央へ配置することが出来ます (動作確認用リンク)。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
7  <title>タイトル</title>
8  <style>
9    html,
10    body {
11      height: 100%;
12    }
13
14    body {
15      display: -ms-flexbox;
16      display: flex;
17      -ms-flex-align: center;
18      align-items: center;
19      padding-top: 40px;
20      padding-bottom: 40px;
21      background-color: #f5f5f5;
22    }
23
24    .form-signin {
25      width: 100%;
26      max-width: 420px;
27      padding: 15px;
28      margin: auto;
29    }
30
31    .form-label-group {
32      position: relative;
33      margin-bottom: 1rem;
34    }
35
36    .form-label-group>input,
37    .form-label-group>label {
38      height: 3.125rem;
39      padding: .75rem
40    }
41
42    .form-label-group>label {
43      position: absolute;
44      top: 0;
45      left: 0;
46      display: block;
47      width: 100%;
48      margin-bottom: 0;
49      /* デフォルトの `<label>` margin を上書き */
50      line-height: 1.5;
51      color: #495057;
52      pointer-events: none;
53      cursor: text;
54      /* ラベルの下の入力と一致させる */
55      border: 1px solid transparent;
56      border-radius: .25rem;
57      transition: all .1s ease-in-out;
58    }
59
60    .form-label-group input::-webkit-input-placeholder {
61      color: transparent;
62    }
63
64    .form-label-group input:-ms-input-placeholder {
65      color: transparent;
66    }
67
68    .form-label-group input::-ms-input-placeholder {
69      color: transparent;
70    }
71
72    .form-label-group input::-moz-placeholder {
73      color: transparent;
74    }
75
76    .form-label-group input::placeholder {
77      color: transparent;
78    }
79
80    .form-label-group input:not(:placeholder-shown) {
81      padding-top: 1.25rem;
82      padding-bottom: 1.25rem;
83    }
84
85    .form-label-group input:not(:placeholder-shown)~label {
86      padding-top: .25rem;
87      padding-bottom: .25rem;
88      font-size: 12px;
89      color: #777;
90    }
91
92    /* Edge用フォールバック
93-------------------------------------------------- */
94    @supports (-ms-ime-align: auto) {
95      .form-label-group>label {
96        display: none;
97      }
98
99      .form-label-group input::-ms-input-placeholder {
100        color: #777;
101      }
102    }
103
104    /* IE10-11用フォールバック
105-------------------------------------------------- */
106    @media all and (-ms-high-contrast: none),
107    (-ms-high-contrast: active) {
108      .form-label-group>label {
109        display: none;
110      }
111
112      .form-label-group input:-ms-input-placeholder {
113        color: #777;
114      }
115    }
116
117  </style>
118</head>
119
120<body>
121  <div class="form-label-group mx-auto">
122    <form id="loginForm" name="loginForm" action="" method="POST">
123      <div class="text-center mr-4">
124        <img class="mb-4" src="../images/bootstrap-solid.svg" alt="" width="72" height="72">
125        <h1 class="h3 mb-3 font-weight-normal">CLANE STAR ONLINE</h1>
126        <p>ゲームで遊ぶ為には、ログインしてください。</p>
127        <br>
128        <div class="form-label-group">
129          <input type="text" id="userid" name="userid" placeholder="ユーザーIDを入力" value="">
130          <label for="inputEmail">ユーザー名</label>
131        </div>
132
133        <div class="form-label-group">
134          <input type="password" id="password" name="password" value="" placeholder="パスワードを入力">
135          <label for="inputPassword">パスワード</label>
136        </div>
137        <button class="btn btn-lg btn-primary btn-block" id="login" name="login" value="ログイン" type="submit">ログイン</button>
138        <p>アカウントがありませんか? <a href="http://localhost/clane/online/mypage/SignUp.php">アカウントを作る</a></p>
139        <p class="mt-5 mb-3 text-muted text-center">&copy; 2019-2020</p>
140      </div>
141  </form>
142  </div>
143</body>
144
145</html>