フォームを上下左右中央に配置する方法

プログラミング超初心者です。
テキストボックスとsubmitボタンを画面の上下左右中央に配置する方法がわかりません。多分簡単なことなのでしょうが、僕の調べた範囲ではよく分かりませんでした。どなたかご協力お願いします。
HTMLのソースは以下です。

HTML
1<html>
2    <head>
3        <meta charset="UTF-8">
4        <link rel="stylesheet" href="style_index.css">
5    </head>
6    <body>
7            <form method = 'post' action = '#'>
8                    <input type = 'text' name = 'keyword' class='txt'>
9                    <input type = 'submit' value = '検索' class = 'send'>
10            </form>
11    </body>
12</html>

CSS
1input.txt
2{
3    width:45%; 
4    height:30px;
5}
6
7input.send
8{
9    width:5%;
10    height:30px;
11}
12

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

回答2件

ベストアンサー

flexでjustify-contentプロパティとalign-itemsプロパティにcenterを指定することで実現できると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <style type="text/css">
6        * {
7            margin: 0;
8            padding: 0;
9        }
10
11        html, body, .form1 {
12            width: 100%;
13            height: 100%;
14        }
15
16        .form1 {
17            display: flex;
18            justify-content: center;
19            align-items: center;
20        }
21    </style>
22</head>
23<body>
24<div class="form1">
25    <form method="post" action="#">
26        <label>
27            <input type="text" name="keyword" class="txt">
28        </label>
29        <label>
30            <input type="submit" value="検索" class="send">
31        </label>
32    </form>
33</div>
34</body>
35</html>

追記

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <style type="text/css">
6        * {
7            margin: 0;
8            padding: 0;
9        }
10
11        html, body, .form1 {
12            width: 100vw;
13            height: 100vh;
14        }
15
16        .form1 {
17            display: flex;
18            justify-content: center;
19            align-items: center;
20            background-color: black;
21        }
22
23        input.txt {
24            min-width: 45vw;
25            height: 30px;
26        }
27
28        input.send {
29            min-width: 5vw;
30            height: 30px;
31        }
32    </style>
33</head>
34<body>
35<div class="form1">
36    <form method="post" action="#">
37        <label>
38            <input type="text" name="keyword" class="txt">
39        </label>
40        <label>
41            <input type="submit" value="検索" class="send">
42        </label>
43    </form>
44</div>
45</body>
46</html>

投稿2017/05/31 11:16

編集2017/05/31 11:29

s8_chu

総合スコア14731

退会済みユーザー

2017/05/31 11:37

ご回答ありがとうございます！おかげ様で無事思い描いていた画面を作ることができました。kei344の回答も大変ありがたかったのですが、先着ということでs8_chuさんの回答をベストアンサーとさせていただきました。また何かの機会がありましたらよろしくおねがいします。

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

CSS
1form {
2	display: block;
3	position: fixed;
4	top: 50%;
5	left: 50%;
6	-webkit-transform: translate(-50%,-50%);
7	transform: translate(-50%,-50%);
8	max-width: 100vw;
9	max-height: 100vh;
10}
11```**動くサンプル：**[https://jsfiddle.net/ybzwrqe7/](https://jsfiddle.net/ybzwrqe7/)

投稿2017/05/31 11:07

kei344

総合スコア69407

退会済みユーザー

2017/05/31 11:13

回答ありがとうございます！記載し忘れていたのですがテキストボックスとsubmitボタンのサイズを input.txt { width:45%; height:30px; } input.send { width:5%; height:30px; } という風に指定していました。ですがご回答してくださったコードを追加すると確かに中央には配置できましたが、サイズが崩れてしまいました。もし宜しければその対処法も教えてくれると有難いです。

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

あなたの回答