Clearly mark button as CENTERED in Designer, but displays left-aligned on browsers

The Designer shows the button as centered, but no browser actually displays it as centered. :-( Why does the Designer tool show this element incorrectly?

Kindly add the following CSS block to the CSS tab section of your designer, add it a t the bottom of the editor

.form-submit-button {
    margin-left:auto !important;
    margin-right:auto !important;
    display:auto !important;
}

OK. But why does the CENTER tool in Designer not do this? Why do I have to add more CSS when the Deisgner is supposed to handle this task?

There was a section of CSS for the button that was overriding the default placement for centering the button using the designer tool, this usually happens if you applied a theme to the form and additional positioning styles were added.

That's why the snippet that was provided above contained the tag !important to prevent the placement from being overridden back to the default positioning.

In your case the block that was affecting the positing was on line 191 in the CSS