Center div inside another div in Internet Explorer

I have the code below:

#div1 {
    position: relative;
    width:800px;
    height:540px;
    top: 50%;
    left: 50%;
    margin-top: -270px;
    margin-left: -400px;
}

#div2 {
    position:absolute;
    left:69px;
    top:223px;
    width:250px;
    height:144px;
}

#div3 {
    width:100%;
    text-align:center;
    position:absolute;
    bottom:0px;
}
<div id="div1">
    <div id="div2">
        Message top.
        <div id="div3">
            Message bottom!
        </div
    </div开发者_开发知识库>
</div>

div1 center o box on browser window. It's ok on all browsers.

div2 place a box inside div1. It's ok on all browsers.

div3 displays a message inside div2 but a aligned on bottom and centered. It's not ok on IE8 because it's center div3 based on window size. Chrome and Firefox center inside div2.

If I add a border to div3 it has div2 width on all browsers but window centered on IE8.

How can I correct this?

Thank you.

Is this fixing it for you?

<div id="div1" style="position: relative; width:800px; height:540px; top: 10%; left: 50%; margin-top: -20px; margin-left: -400px;">
    <div id="div2" style="position:absolute; left:69px; top:223px; width:250px; height:144px; border:1px solid blue">
        <div>Message top!</div>
        <div id="div3" style="width:100%; text-align:center; position:absolute; bottom:0px;border:1px solid red">
            Message bottom!
        </div
    </div>
</div>

(Yeah I used the old version with inline style).

Notes :

1. The issue is not IE8, it's IE8 quirk mode (aka ie6/7) (correct your document specification if you want your page rendered as IE8 and you wont have the problem anymore).
2. The problem is that It will put #div3 "inline" with your "Message top!". So encapsuling that message in a block element solve the issue.
3. I changed some other properties to make testing easier (top:10%, margin-top:-20px, some border...)