Center a Rhombus created by transform rotate

Question

I created a Rhombus using transform css propriety however it seems like the center point of my Rhombus is on the right side instead of being in the middle. Anyone knows how I could fix it ?

Here is my code :http://jsfiddle.net/2M2j9/

.rhombus{
 width:100px; 
 height:100px; 
 background:black;
margin:0 auto;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 -ms-transform-origin: 0 100%;
 -o-transform-origin: 0 100%;
 transform-origin: 0 100%;
}

Answer 1

Demo

use

transform-origin: center;

css

.rhombus{
     width:100px; 
     height:100px; 
     background:black;
     margin:0 auto;
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
     -webkit-transform-origin: center;
     -moz-transform-origin: center;
     -ms-transform-origin: center;
     -o-transform-origin: center;
     transform-origin: center;
}

If you wish to have absolute center Demo

css

.rhombus{
     width:100px; 
     height:100px; 
     background:black;
     margin:auto;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
     -webkit-transform-origin: center;
     -moz-transform-origin: center;
     -ms-transform-origin: center;
     -o-transform-origin: center;
     transform-origin: center;
}