Query regarding css

I am following the certification of front end development (html and css) . There is a practice project in which we make a form . Now I have a question , see:
my html code is:

Registration Form
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
     <input type="submit" value="Submit" />
</form>

now if I add my css code like
input[type=“submit”] {

/* display: block; */


width: 60%;
margin: 0 auto;
height: 2em;
font-size: 1.1rem;
background-color: #3b3b4f;
border-color: white;

}
my page looks like :


Now see that submit button is not in center i.e it is in left of the form , but as I uncomment above comment it comes in center , I believe that because of statement ‘margin:0 auto’ it should come in center , why by changing its display to block it comes in center i.e center of the form.
(This is not complete Css code actually I have also style form tag in such a way that my form is in center , )
Please explain !

Input tags by default are inline elements
Why ‘display: inline-block’ or “inline” does not center:

There is no available horizontal space in an inline setting. Before and after it are other inline elements (characters) that take up their own space. Therefore, the element will act as if the horizontal margin is set to zero.

Why ‘display: block’ centers:

When used as an element with display: block set to it, the available horizontal space will be the full width of the parent element minus the width of the element itself. This makes sense because display: block is reserving this horizontal space (thus making it ‘available’). Note that elements with display: block cannot be placed next to each other. The only exception occurs when you use float, but in that case you also get the (expected) zero-margin-behaviour, as this disables the horizontal ‘availability’.
Here’s a link: https://stackoverflow.com/questions/19076919/marginauto-doesnt-work-on-inline-block-elements