How to align in in the middle the html div?

Question

I've been looking for this in google and it says that the css code is margin: 0 auto;. I tried it and it doesn't work for me. Please help. Thanks in advance.

login.html

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Log In</title>
 <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
 <div id="formLogin">
    <table class="formTable">
        <tr>
            <td>Username: </td>
            <td> <input type="text" id="loginusername" name="loginusername"/>  </td>
        </tr>

        <tr>
            <td>Password: </td>
            <td> <input type="password" id="loginpassword" name="loginpassword"/>  </td>
        </tr>

    </table>

    <div align="center">
        <input type="submit" id="btnlogin" name="btnlogin" value="Log In"/>
        <input type="submit" id="btncancelogin" name="btncancelogin" value="Cancel"/>
    </div>
 </div>

</body>
</html>

stylesheet.css

table.formTable {
 margin-left: auto;
 margin-right: auto;
}

table.formTable td {
 padding: 8px;
}

#formLogin {
 width: 360px;
 background-color: #eeeeee;
 margin: 0 auto;
 padding: 20px;
 -moz-border-radius:    10px;
 -webkit-border-radius: 10px;
 border-radius:         10px;
}

I think you'd better strip down your code example to the most basic form and also include an example of what you want and some explanation of what you already tried. — Bas Slagter, Oct 13 '11 at 08:16
I want the entire div("formLogin") to be vertically in the middle of the browser. — NinjaBoy, Oct 13 '11 at 08:18
It seems that your code works for me fine? Table with Login form is centred in the middle of the page. Not vertically though. Do you want to centre it vertically? — RandomWhiteTrash, Oct 13 '11 at 08:20
vertically? if you want to do that you should not have a margin-top and margin-bottom of 0. check out w3schools for the short notation of the margin directive. — ikromm, Oct 13 '11 at 08:21
@JohnKrommidas I forgot to mention that I already tried margin-top: 0 and margin-bottom: 0 but failed. — NinjaBoy, Oct 13 '11 at 08:24
Check my answer there is a link to a nice article about vertical centering. Hope it will work for you! — RandomWhiteTrash, Oct 13 '11 at 08:28
@RandomWhiteTrash The prolem with the example is the height is fixed. If the browser changes its size the div is not already in the middle. — NinjaBoy, Oct 13 '11 at 08:44
Check my answer again. I put in some code there for you. Hope it works :). Apologies for delay, I got distracted. — RandomWhiteTrash, Oct 13 '11 at 10:30

RandomWhiteTrash · Accepted Answer · 2011-10-13T10:29:40.617

If you want to center it vertically also try reading this.

Update:

Try this code. Of course you can move CSS out to your css file. Tested in IE9 and FF6:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Log In</title>
 <link rel="stylesheet" type="text/css" href="stylesheet.css" />
<style type="text/css">
#wrapper{
    background-color: #ccf;
    position: relative;
    text-align: left;
    width: 100%;
    height: 100%;
    margin: 0px auto;

    }
#content{   
    background-color: transparent;
    position: absolute;
    top: 40%;
    left: 0px;
    width: 100%;
    margin-top: auto;
    text-align: center;
    min-width: 900px; 
}
table.formTable {
 margin-left: auto;
 margin-right: auto;
}

table.formTable td {
 padding: 8px;
}

#formLogin {
 width: 360px;
 background-color: #eeeeee;
 margin: 0 auto;
 padding: 20px;
 -moz-border-radius:    10px;
 -webkit-border-radius: 10px;
 border-radius:         10px;
}

</style>
</head>
<body>
<div id="wrapper">
    <div id="content">
 <div id="formLogin">
    <table class="formTable">
        <tr>
            <td>Username: </td>
            <td> <input type="text" id="loginusername" name="loginusername"/>  </td>
        </tr>

        <tr>
            <td>Password: </td>
            <td> <input type="password" id="loginpassword" name="loginpassword"/>  </td>
        </tr>

    </table>

    <div align="center">
        <input type="submit" id="btnlogin" name="btnlogin" value="Log In"/>
        <input type="submit" id="btncancelogin" name="btncancelogin" value="Cancel"/>
    </div>
 </div>
    </div>
</div>

</body>
</html>

score 0 · Answer 2 · answered Oct 13 '11 at 08:23

Like Hachi says try text-align:center; but you could also add this to your CSS:

body {
    width:100%;
}

This will give your page a width, so your elements will have a width to use.

Update:

Didn't realise you wanted it vertically centered too. You could put the whole thing in a table cell and use valign="middle" to center it.

score 0 · Answer 3 · answered Oct 13 '11 at 08:49

0

I think it's about DOCTYPE. Have try to put DOCTYPE

HTML 5

<!DOCTYPE HTML>
<html>

HTML 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

answered Oct 13 '11 at 08:49

kst

1,498
3
19
34

How to align in in the middle the html div?

3 Answers3