Center A form HTML CSS

Issue

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>

Solution

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>

Answered By - Jon P