IE7无法抵消保证金

Question

Would anyone be able to tell me why my following code doesn't centre the "block" on the "pivot" in IE7?

Instead it seems to half the size of the "block" for those browsers.

<style>
.pivot {
   position: absolute;
   top: 50%;
   left: 50%;
}
.block {
   height: 200px;
   width: 200px;

   margin-left: -50%;
   margin-top: -50%;

   background-color: green;
}
</style>

<div class="pivot">
<div class="block"></div>
</div> <!-- end pivot -->

EDIT

To get this to work I used Erics code for IE6-IE-7 hacked into my margin approach for all other browsers

Answer 1

Something in your code is wrong, try giving to pivot width and height and it wont work in any browser.

If you want to center an element in the center of the screen you should do something like that:

#element {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
background-color: green;
}

And it will work in all browsers, including IE6-7.

Answer 2

Is this not an option for you?

.pivot {
    text-align: center;
}
.block {
    display: inline-block;
    text-align: left;
}

Answer 3

Normally the done thing is to use relative positioning:

<style>
.pivot {
   position: absolute;
   top: 50%;
   left: 50%;
}
.block {
   height: 200px;
   width: 200px;

   position: relative;
   left: -50%;
   top: -50%;

   background-color: green;
}
</style>

<div class="pivot">
    <div class="block"></div>
</div>