Как центрировать повернутый DIV как угловой баннер?

Question

У меня есть div, который я использую как угловой баннер, но у меня возникают проблемы с центрированием текста после поворота DIV на 45 градусовКак рассчитать верхнее и левое значения, чтобы DIV шириной 300 пикселей центрировался в верхнем левом углу экрана?Вот фрагмент моего CSS и HTML:

#cornerBanner {
        color: #F47D31;
        background-color: #333;
        -moz-box-shadow: 2px 2px 20px #888;
        -moz-transform: rotate(-45deg);
        -moz-transform-origin: 50% 50%;
        position: absolute; 
        width: 300px;
        top: 50px;
        left: -100px;
        text-align: center;
      }

<DIV ID="cornerBanner">Beta</DIV>

Answer 1

Это по центру.Вам просто нужно немного отрегулировать его положение:

#cornerBanner {
        color: #F47D31;
        background-color: #333;
        -moz-box-shadow: 2px 2px 20px #888;
        -moz-transform: rotate(-45deg);
        -moz-transform-origin: 50% 50%;
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: 50% 50%;
        position: absolute; 
        width: 300px;
        top: 45px;
        left: -95px;
        text-align: center;
      }

http://jsfiddle.net/AlienWebguy/UxzaL/