I have the following code
body {}
.PrincipalForm {
margin: 0 auto;
border: 1px solid #666666;
width: 310px;
height: 600px;
}
.TblLogin {
margin: 0 auto;
}
#usuario {
width: 150px;
}
#password {
width: 150px;
}
#Aceptar {
width: 150px;
}
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="css/estiloLogin.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<form class="PrincipalForm">
<table class="TblLogin">
<tr>
<label>Usuario:</label>
</tr><br>
<tr>
<input type="text" id="usuario">
</tr><br>
<tr>
<label>Password:</label>
</tr><br>
<tr>
<input type="password" id="password">
</tr><br>
<tr>
<button type="button" id="Aceptar">Aceptar</button>
</tr><br>
</form>
</body>
</html>
To align your form horizontally use
and to align it vertically:
First of all, be careful with the structure of the table, you did not close the tag and you forgot to use the TD tags. If you don't use them, some browsers may override the table and remove its properties in the process.
Mistyping the table structure caused your form to not align horizontally.
Now, to align an element vertically there are several tricks with CSS, one of them is to try to make two elements behave as if they were a table with a cell inside it so that the one that behaves as a cell has the properties of a cell. HTML cell and can be vertically aligned.
In this case, modify your code so that the form has the property
display: table
and create a div that contains your table, which will have thedisplay: table-cell
.You just need to add
text-align: center
to your form like so: