How to Center This Form in CSS

How do I center this form in css?

Another way

body {    text-align: center;}form {    display: inline-block;}

<body>  <form>    <input type="text" value="abc">  </form></body>

CSS : center form in page horizontally and vertically

If you want to do a horizontal centering, just put the form inside a DIV tag and apply align="center" attribute to it. So even if the form width is changed, your centering will remain the same.

<div align="center"><form id="form_login"><!--form content here--></form></div>

UPDATE

@G-Cyr is right. align="center" attribute is now obsolete. You can use text-align attribute for this as following.

<div style="text-align:center"><form id="form_login"><!--form content here--></form></div>

This will center all the content inside the parent DIV. An optional way is to use margin: auto CSS attribute with predefined widths and heights. Please follow the following thread for more information.

How to horizontally center a in another ?

Vertical centering is little difficult than that. To do that, you can do the following stuff.

html

<body>
<div id="parent">
    <form id="form_login">
     <!--form content here-->
    </form>
</div>
</body>

Css

#parent {
   display: table;
   width: 100%;
}
#form_login {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

Center A form HTML CSS

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>

How do I center a form in HTML/CSS?

You can use the <center> tag to horizontally align the content.

.contact .container {    display: block;    text-align: center;}.contact form {    display: inline-block;    margin-left: auto;    margin-right: auto;    text-align: left;}.contact input:not([type=checkbox]),.contact .checkbox-container,.contact button {    display: block;    width: 30%;    margin: 0 auto;    margin-top: 1.3em;    border-radius: 20px;    height: 2em;}
.contact input:not([type=checkbox]),.contact button {    display: block;    width: 30%;    margin: 0 auto;    margin-top: 1.3em;    border-radius: 20px;    height: 2em;    text-indent: 1.5em;    background-color: rgb(170, 193, 221);    border: 1px solid white;}
.contact input[type=checkbox] {    display: inline-block;}
.contact input[type=checkbox]:checked {    background-color: rgb(170, 193, 221);}
.contact button {    width: 10%    text-indent: 0;    color: white;}

<body class="contact">    <div class="container">    <center>    <h1>What's Buzzin'?</h1>    <p>Love bees? Are you a beekeeper? Have facts or images that you want on the site? Contact us!</p>    <form action="#" method="#">        <input type="text" placeholder="Name">        <input type="email" placeholder="Email">        <input type="message" placeholder="Message">        <div class="checkbox-container">        <input type="checkbox" id="newsletter" checked>        <label for="newletter">Receive Bee Business!</label>    </div>        <button type="submit">Buzz!</button>    </form>    </center></div></body>

Center form box css

For margin auto to work, you need to specify a specific width. My solution:

    #form {      width: 200px;      margin-left: auto;      margin-right: auto;    }

    <form method="GET" id="form">      <input type="text" name="q" class="input center search" />      <input type="submit" class="btn submit">    </form>

How to align form at the center of the page in html/css

Like this

demo

css

    body {
    background-color : #484848;
    margin: 0;
    padding: 0;
}
h1 {
    color : #000000;
    text-align : center;
    font-family: "SIMPSON";
}
form {
    width: 300px;
    margin: 0 auto;
}