Question

I am a beginner when it comes to web programming, and I wanted to make my form on the center of the page, using CSS and HTML, how can I do it?

<form action="login.php" method="post">
username: <input type="text" id="txtusername" /><br />
password: <input type="text" id="txtpassword" /><br />
<input type="submit" value="login" />
</form>

Answer 1

Add a div with an explicit width and margin: 0 auto. This is the CSS way to center an item horizontally. There’s no easy hack to make a page centered vertically.

 <div style="width: 500px; margin: 200px auto 0 auto;">
   <form action="login.php" method="post">
     Username: <input type="text" id="txtusername" /><br />
     Password: <input type="text" id="txtpassword" /><br />
     <input type="submit" value="login" />
   </form>
 </div>

You could either use position:fixed, but alternatively, I would suggest simply adding an appropriate margin-top, as seen above.

Here is an example on JSFiddle. Enjoy!

P.S. For the margin tag, the values are margin: [top] [right] [bottom] [left], hence why I did 200px for top, 0px for bottom, and auto for both left and right.