Center A form HTML CSS - html

Question

Hello I am having issues centering a form for a login page. I am not to good with CSS and it has been a while since I have played with HTML. What I want to do is, center the input boxes and align the text left on top of the input fields, as well as have an image centered as well, like in the picture. I have tried adding different div id and tags to the form but I can not seem to figure out the css part. I appreciate any help and sorry if the CSS is sloppy.
body {
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
color: black;
}
p {
color: black;
}
html {
text-alight: center;
}
#login {
text-align:center;
}
input[type=text], input[type=date], input[type=password] {
width: 30%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 30%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users {
width: 30%;
height: 50px;
}
#media only screen and (max-device-width: 1024px){
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users{
width: 100%;
height: 50px;
}
#keypad_users{
width: 345px;
height: 50px;
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:30px;
font-weight:bold;
}
#keypad {margin:auto; margin-top:10px;}
#keypad tr td {
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:18px;
font-weight:bold;
width:100px;
height:80px;
cursor:pointer;
background-color:#666666;
color:#CCCCCC;
}
#keypad tr td:hover {
background-color:#999999;
color:#FFFF00;
}
#display {
text-align:center;
width:345px;
margin:10px auto auto auto;
background-color:#000000;
color:#00FF00;
font-size:48px;
border:1px solid #999999;
}
#message {
text-align:center;
color:#009900;
font-size:18px;
font-weight:bold;
display:none;
}
}
<div id="login">
<form action = "login.php" id="login" method ="POST">
Username <br />
<input type="text" name="username" id="username" required /><br /><br />
Password <br />
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>

Answer 1

I've made a JSfiddle for you here (click me please) that resembles the picture you've added.
As requested to not use a third party like I've added the code here:
HTML
<div id="login">
<form action = "login.php" id="login" method ="POST">
<div class="picture">
</div>
<p>Username</p>
<input type="text" name="username" id="username" required /><br /><br />
<p>Password</p>
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
CSS
body
{
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#login
{
text-align:center;
width: 50%;
margin: 0 auto;
}
.picture
{
width:100px;
height: 100px;
border-radius: 100px;
background-color:red;
margin: 0 auto;
}
#login p
{
float: left;
}
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
EDIT:
New fiddle here: https://jsfiddle.net/gay1ufa1/2/

Answer 2

I've improved your HTML. All form inputs should have an associated label element. Also don't use br for spacing use padding/margin instead.
Further more use have a duplicated id, id's must be unique to the page.
#login_container /*This is Our base container for the login "control" */
{
width:30%; /*Define the width of the control*/
margin:auto; /*This Provide the horizontal centering of the control*/
padding:120px 10px 10px 10px; /*Add some padding, the first number is the top and provides room for the image*/
background-image:url(" http://fillmurray.com/100/100"); /*Add our background image, thanks Bill Murray*/
background-position:center 10px; /*Position our image, first is Horizontal alignment, second is top*/
background-repeat:no-repeat; /*One Bil Murray is more than enough*/
background-color: #F0F0F0; /*Base Background image*/
}
#login_container label
{
display:block; /*Label will now take up a whole line*/
margin-bottom:.25em; /*Give it some room underneath*/
}
#login_container input[type="text"], #login_container input[type="password"], #login_container input[type="submit"]
{
width:100%; /*Form controls now take 100% width of the container*/
margin-bottom:0.5em;
}
<div id="login_container"> <!-- Can't have duplicate ID's -->
<form action = "login.php" id="login" method ="POST">
<label for="username">Username </label>
<input type="text" name="username" id="username" required />
<label for="password">Password</label>
<input type ="password" name="password" id="password" required />
<input type="submit" name="submit" value="Log in">
</form>
</div>

Answer 3

One problem in your code is that you use the ID "login " twice, which must not be done. I put together a codepen, which you can find here:
http://codepen.io/anon/pen/dNWQgp
What I basically did (except adding a div representing the image in your picture): I assigned the following CSS to a wrapper DIV around the whole form and image. It uses flexbox to center the contents. Plus I assigned a width setting (40%) to the form element.
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

Answer 4

To center a div set margin-left and margin-right to auto and assign a fixed width to it. In your case, this would be for #login.