IE7 не может компенсировать с запасом

Question

Кто-нибудь сможет мне сказать, почему мой следующий код не центрирует "блок" на "стержне" в IE7?

Вместо этого он кажется вдвое меньше, чем "блок" для тех,браузеры.

<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 -->

РЕДАКТИРОВАТЬ

Чтобы заставить это работать, я использовал код Erics для IE6-IE-7, взломанный в моем подходе к марже для всех других браузеров

Answer 1

Что-то в вашем коде неверно, попробуйте указать ширину и высоту поворота, и это не сработает в любом браузере.

Если вы хотите центрировать элемент в центре экрана, вы должны сделать что-то подобное:

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

И это будет работать во всех браузерах, включая IE6-7.

Answer 2

Обычно готово использовать относительное позиционирование:

<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>

Answer 3

Разве это не вариант для вас?

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