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

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>