Thread: IE8 centering vertically and horizontally

That's odd. It appears fine on mine.

Perhaps I have another css file that is required. I do include 2 or 3 in the header.

Here you go Shem, try this. I included another "container" div to hold the login form

Code:

<div id="container">
        <div class="login_form">
.
.
.
        </div>
</div>

And changed css to this:-

Code:

/* ============================== BODY ============================== */
    body {

        background-color:#FFFFFF;
        font-family:Arial, Helvetica,  sans-serif;
        padding:0;
        margin:0;
    }



/* ============================== LOGIN ============================== */

#container
{
    width:100%;
    height:100%;
    position:absolute;
}

.login_form{
        padding:20px;
        background-color:#F1F3F5;
        border:1px solid #CCCCCC;
        width:600px;
        height:300px;
        position: relative;
            top: 50%;
        margin-top:-150px;
            margin-left: auto;
            margin-right: auto;
    }

That appears fine in IE and FF for me.

Hope that helps.

I guess height on the body element isn't valid in IE8. So you need a container element to get the 100%.