将变换旋转创建的菱形居中

Question

我使用变换css propriety创建了一个菱形，然而我的菱形的中心点似乎在右侧而不是在中间。有谁知道我怎么解决它？

这是我的代码：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

使用

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

如果您希望拥有绝对中心 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;
}