1. Use style attributes directlya. Horizontal centeringTo make it center in Firefox/Chrome/Safari, use a wrapper. Wrap the form in a div section:
Code:<div style="margin:0 auto;width:40%;text-align:left">
For IE, you will need to apply a style to the body:
Code:<body style="text-align:center">
b. Both horizontal and vertical centeringCode:style="margin-top:15%;margin-left:35%;padding-top:0px;"
2. Centering in CSS
a. Code:<style type="text/css">
div#center {
margin: 0 auto;
height: 30%;
width: 40%;
</style>
Put this around your form:
Code:...
<div id="center">
<h2 style = "text-align:center">
...
</form>
</h2>
</div>
</body>
b. Code:<style type="text/css">
form {
height:400px;
width:400px;
position: absolute;
left: 50%;
top: 50%;
background-color:#CCC;
/* Set margins to offset 50% of the w/h */
margin: -200px 0 0 -200px;
}
See
HTML to CSS: Center the page vertically and horizontally.
Also visit
Dead Centre, Vertical Centering in CSS.