Автоматическое выравнивание CSS-поля

Я упростил код как можно больше, но все равно не могу получить его в центр. Я считаю, что моя неопытность с CSS не позволяет мне увидеть что-то чрезвычайно простое.

Если кто-то знает и хорошие ресурсы для css, это будет здорово. Я прочитал разделы из многих книг CSS, но там все очень простое и обложка того же самого.

Разметка CSS:

/* MAIN ––––––––––––––––––––– */
html {
    /* overflow-y:scroll; */
}
body {
    /* margin:0; */
    /* position:relative; */
}
/* Form ––––––––––––––––––––– */
#form {
    margin:0 auto;
    width: 300px;
    height: 200px;
    display: inline-block;
    border: 2px solid black;
}

index.html

<html>
  <body>

    <form id='form'></form>

  </body>
</hml>

Ответ 1