How to move html input

Question

I wanted to move this login form to the center of the page but it won’t. I tried padding, text-ident, align, nothing does these input if you move, with the exception of the button nothing moves, even though I copied and pasted, it does not change places at all, so I will post the whole code.

Code:

body{ background-color: black;} body{ color: white;}

Firetecofficial-Access page

Login to access your account

<!--Sistema de Login-->

<form>
    <table> 
        <label for="login">Login:
        <input type="text" id="login" name="login" placeholder="Codigo do cidadão" size="10"><br />
        <label for="Senha">Senha:
        <input type="password" name="senha" placeholder="Senha" size="10"><br />
        <input style="text-indent: 1100px;" type="submit" name="botao-Acessar" value="Acessar" ><br />
        <input type="checkbox" name="manterconectado" value="Manter conectado"/> Manter conectado <br />
        <input style="text-indent: 1100px;" type="checkbox" name="termoseservicos" value="Li e Aceito os termos de uso"/> Li e Aceito os termos de uso<br />
     </table>
</form>

Answer 1

If you want to centralize everything, you can use the display: flex, together with its alignment properties, in a <div> for the form, with this you can centralize the information, without losing the "indentation" of the elements and leaving the elements in the same line, as the checkbox.

You can understand more by taking a look at this guide.

Follow the example of use, below:

#containerForm{
  display:flex;
  justify-content:center;
  align-items:center;
}

<div id="containerForm">
  <form>
    <table> 
        <label for="login">Login:</label>
        <input type="text" id="login" name="login" placeholder="Codigo do cidadão"><br />
        <label for="Senha">Senha:</label>
        <input type="password" name="senha" placeholder="Senha"><br />
        <input type="submit" name="botao-Acessar" value="Acessar" ><br />
        <input type="checkbox" name="manterconectado" value="Manter conectado"/> Manter conectado <br />
        <input type="checkbox" name="termoseservicos" value="Li e Aceito os termos de uso"/> Li e Aceito os termos de uso<br />
     </table>
  </form>
</div>

Answer 2

Young man, first see you wear one table the way you used inside the form doesn’t make any sense, you can withdraw that tag...

Then just put text-align:center on the tag form that the entire content will be centralized, as the tags within the form are tag with scope inline

form {
  text-align: center;
}
  

<form>
    <label for="login">Login:
    <input type="text" id="login" name="login" placeholder="Codigo do cidadão" size="10"><br />
    <label for="Senha">Senha:
    <input type="password" name="senha" placeholder="Senha" size="10"><br />
    <input style="" type="submit" name="botao-Acessar" value="Acessar" ><br />
    <input type="checkbox" name="manterconectado" value="Manter conectado"/> Manter conectado <br />
    <input style="" type="checkbox" name="termoseservicos" value="Li e Aceito os termos de uso"/> Li e Aceito os termos de uso<br />
</form>