Помогите выровнить окно ввода информации и всё остальное по центру

Question

* {
  padding: 0;
  margin: 0;
  bottom: 0;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus,
:active {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

nav,
footer,
header,
aside {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 100%;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 400;
}


/*-----------------------------------------------------------------*/

.areal {
  font-family: gabriola, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.fontsize30 {
  font-size: 25px;
  font-style: oblique;
  font-weight: 700;
  text-align: center;
}

.italic1 {
  font-style: italic;
  font-weight: 500;
  color: blue;
  text-align: center;
}

.italic2 {
  font-style: italic;
  font-weight: 500;
  color: rgb(253, 85, 155);
  text-align: center;
}

.italic {
  font-style: italic;
  font-weight: 500;
  text-align: center;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <form action="#" method="post" enctype="multipart/form-data"></form>
  <p class="fontsize30">Регестрация Заказа</p>
  <br>
  <p class="areal">Имя</p>
  <div>
    <input tabindex="1" type="text" name="Username" value="">
  </div>
  <p class="areal">Пороль</p>
  <div>
    <input tabindex="2" type="password" name="Userpass" value="">
  </div>
  <p class="areal"> Номер телефон</p>
  <div>
    <input tabindex="3" type="text" name="Usernumder" value="">
  </div>
  <br>
  <p class="areal">Пол</p>
  <div class="italic1">
    <input tabindex="4" type="radio" name="pol" value="men"> Мужской
  </div>
  <div class="italic2">
    <input tabindex="5" type="radio" name="pol" value="wumen"> Женский
  </div>
  <br>
  <p class="areal">Имущевсство</p>
  <div class="italic">
    <input tabindex="6" type="checkbox" name="imuh" value="velik"> Велосепед
  </div>
  <div class="italic">
    <input tabindex="7" type="checkbox" name="cars" value="cars"> Машина
  </div>
  <div class="italic">
    <input tabindex="8" type="checkbox" name="House" value="Hous"> Квартира
  </div>
  <br>
  <p class="areal">Дополнительная информация</p>
  <div>
    <textarea tabindex="9" name="dop"></textarea>
  </div>
  <br>
  <p class="areal">Прикрепить фото</p>
  <div>
    <p><input tabindex="10" type="file" name="foto"></p>
  </div>
  <br>
  <p class="areal">Любимый цвет</p>
  <div>
    <select tabindex="11" name="color">
      <option value="red">Красный</option>
      <option value="yellow">Желтый</option>
      <option value="blue">Голубой</option>
    </select>
  </div>
  <br>
  <p class="areal">Действия</p>
  <div>
    <button tabindex="12" type="submit">Отправить</button>
    <button tabindex="13" type="reset">Отчистить</button>
  </div>
  <script src="./js/script.js"></script>
</body>

</html>

Answer 1

Помогите выровнить окно ввода информации и всё остальное по центру

Такой вариант можно предложить. Добавил теги, поменял стили...

* {
  padding: 0;
  margin: 0;
  bottom: 0;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus,
:active {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

nav,
footer,
header,
aside {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 100%;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 400;
}


/*-----------------------------------------------------------------*/

/* вот что добавил */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.areal {
  font-family: gabriola, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.fontsize30 {
  font-size: 25px;
  font-style: oblique;
  font-weight: 700;
  text-align: center;
}

.italic1 {
  font-style: italic;
  font-weight: 500;
  color: blue;
  /*
    text-align: center;
    */
}

.italic2 {
  font-style: italic;
  font-weight: 500;
  color: rgb(253, 85, 155);
  /*
    text-align: center;
    */
}

.italic {
  font-style: italic;
  font-weight: 500;
  /*
    text-align: center;
    */
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <form action="#" method="post" enctype="multipart/form-data"></form>
  <p class="fontsize30">Регестрация Заказа</p>
  <br>
  <p class="areal">Имя</p>
  <div>
    <input tabindex="1" type="text" name="Username" value="">
  </div>
  <p class="areal">Пороль</p>
  <div>
    <input tabindex="2" type="password" name="Userpass" value="">
  </div>
  <p class="areal"> Номер телефон</p>
  <div>
    <input tabindex="3" type="text" name="Usernumder" value="">
  </div>
  <br>
  <p class="areal">Пол</p>
  <section>
    <div class="italic1">
      <input tabindex="4" type="radio" name="pol" value="men"> Мужской
    </div>
    <div class="italic2">
      <input tabindex="5" type="radio" name="pol" value="wumen"> Женский
    </div>
  </section>
  <br>
  <p class="areal">Имущевсство</p>
  <section>
    <div class="italic">
      <input tabindex="6" type="checkbox" name="imuh" value="velik"> Велосепед
    </div>
    <div class="italic">
      <input tabindex="7" type="checkbox" name="cars" value="cars"> Машина
    </div>
    <div class="italic">
      <input tabindex="8" type="checkbox" name="House" value="Hous"> Квартира
    </div>
  </section>
  <br>
  <p class="areal">Дополнительная информация</p>
  <div>
    <textarea tabindex="9" name="dop"></textarea>
  </div>
  <br>
  <p class="areal">Прикрепить фото</p>
  <div>
    <p><input tabindex="10" type="file" name="foto"></p>
  </div>
  <br>
  <p class="areal">Любимый цвет</p>
  <div>
    <select tabindex="11" name="color">
      <option value="red">Красный</option>
      <option value="yellow">Желтый</option>
      <option value="blue">Голубой</option>
    </select>
  </div>
  <br>
  <p class="areal">Действия</p>
  <div>
    <button tabindex="12" type="submit">Отправить</button>
    <button tabindex="13" type="reset">Отчистить</button>
  </div>
  <script src="./js/script.js"></script>
</body>

</html>

БЛОГ НА HUSL

Помогите выровнить окно ввода информации и всё остальное по центру

Ответы (1 шт):