サイトのロゴとタイトルが左上
ログイン情報が画面の中央にあるだけのシンプルなログインフォームのデザインのつくり方
【手順１】上下左右中央ぞろえにする
html
<body>
<div id="wrapper">
ログイン情報の入力フォーム
</div>
</body>css
#wrapper{
height:100vh; /* 上下中央にするのに高さは必須 */
display: flex;
justify-content: center; /* 横並びの要素を中央寄せで配置 */
align-items: center; /* 上下の中央ぞろえ */
}ここまでで上下左右中央ぞろえになっていることを確認。
【手順２】入力フォームの各項目を縦並びにする
メールアドレスやパスワードなどを入力するインプットフォームや送信ボタンを縦並びにする。
<div class="vertical_box">
<div>メールアドレス</div>
<input type="text">
<div>パスワード</div>
<input type="text">
<input type="submit" value="送信" class="normal_bt1">
</div>css
.vertical_box {
display:flex;
flex-direction:column;
text-align:center;align-items: center;
justify-content: center;
}