HTMLでの上下左右のよせ

###実現したい事
HTMLで適当なボタンや文字を書いてそれをド真ん中に表示させるためにまずは左右のど真ん中によせようとしたのですが、ボタンやテキストエリアや文字が固まって真ん中によせられてしまいます。理想としてはそれぞれの部品ごとに上下に固まって真ん中によせられてほしいです。何か良い方法がある方回答お願いします。
###現状のコード

HTML
1<html>
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4<title>真ん中</title>
5<link rel="stylesheet" type="text/css" href="./sample.css">
6</head>
7<body>
8<div id="center">
9<form>
10  よせ<br />
11  <input type="text" size="30" value="" /><br />
12  <input type="submit" id="tekitou" value="てきとう" />
13</form>
14</div>
15</body>
16</html>

CSS
1body {
2	 background: #eee;
3}
4
5*{
6    padding: 0;
7    margin: 0;
8    box-sizing: border-box;
9}
10
11#center{
12    position: relative;
13    margin: 0px auto;
14    width:250px;
15}
16
17#regist{
18    width:267px;
19    height: 50px;
20    font-size: 2em;
21}

azuapricot

2019/01/16 00:05

説明が真ん中真ん中しすぎててどの部品をどの位置に配置したいのかよくわからないのでペイントツールでもなんでもいいので図解したほうがよいかとおもいます

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

回答2件

質問の意味を取り間違えているかもですが、「#center」に「text-align:center;」追加ではどうですか？

CSS
1#center{
2    position: relative;
3    margin: 0px auto;
4    width:250px;
5    text-align: center; /* ← 追加 */
6}

投稿2019/01/16 02:21

yoshinavi

総合スコア3523

css
1html, body {
2  height: 100%;
3}
4
5body {
6  background: #eee;
7  display: flex;
8  justify-content: center;
9  align-items: center;
10}
11
12* {
13  padding: 0;
14  margin: 0;
15  box-sizing: border-box;
16}
17