[html] HTML: How to center align a form

I have the following HTML code and i want to make my form aligned in center.

<form action="advsearcher.php" method="get">
    Search this website:<input align="center" type="text" name="search" />
    <input type="submit" value="Search"/>
</form>

How can I do that? Thanks in advance.

This question is related to html

The answer is


simple way:Add a "center" tag before the form tag


The last two lines are important to align in center:

.f01 {
    background-color: rgb(16, 216, 252);
    padding: 100px;
    text-align: left;
    margin: auto;
    display: table;
}

Being form a block element, you can center-align it by setting its side margins to auto:

form { margin: 0 auto; }

EDIT:
As @moomoochoo correctly pointed out, this rule will only work if the block element (your form, in this case) has been assigned a specific width.
Also, this 'trick' will not work for floating elements.


@Lucius and @zyrolasting have it right.

However, you will probably need to give the form a specified width for it to work properly.

form { 
margin: 0 auto; 
width:250px;
}

Use center:

<center><form></form></center>

This is just one method, though it's not advised.

Ancient Edit: Please do not do this. I am just saying it is a thing that exists.


This will have the field take 50% of the width and be centered and resized properly


    {    
        width: 50%;
        margin-left : 25%
    }

May also use "vw" (view width) units instead of "%"


<center><form></form></center>    

does work in most cases like The Wobbuffet mentioned above...


#form{
   position:fixed;
   top:50%;
   left:50%;
   width:250px;
}

You can adjust top & left depending on form size.


Try this : Set the width of the form as 20% by:
width : 20%;
now if the entire canvas is 100 %, the centre is at 50%. So to align the centre of the form at the centre, 50-(20/2) = 40. therefore set your left margin as 40% by doing this :
left : 40%;


Just put some CSS into the stylesheet like this

form {
  text-align: center;
}

then you're done!


Just move align="center" to de form tag

<form align="center" action="advsearcher.php" method="get">
    Search this website:<input type="text" name="search" />
    <input type="submit" value="Search"/>
</form>