Centering image css/html

Question

I'm having a problem centering an image in css,

I have this:

<div class="workcontainer3">
  <div class="wc3_inside"></div>
</div>

.workcontainer3 {
  display:box;
  width: 300px;
  height: 300px;
  margin-left:341px;
  margin-top:277px;
  background-color: #68477c;
  -webkit-transform: rotateX(0deg) rotateY(50deg) rotateZ(-45deg);
  transform: rotateX(0deg) rotateY(60deg) rotateZ(-45deg);
  position:absolute;
  overflow:hidden;
}

.wc3_inside{ 
  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg);
  transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg);
  max-width: 500px;
  max-height: 500px;
  content:url(../testeimg.jpg) 50% 50%;
}

So basicaly I want to create a site, when i'll go to publish articles with images, and I want to get that image and independently of his size, i want that the image become centered in the" rhombus workcontainer3". Like this:

So anyone knows what i'm doing wrong please?

Answer 1

I don't know your html, but you could try this, assuming your .wc3_inside is inside .workcontainer3.

.workcontainer3 {
  display: table;
}

.wc3_inside {
    display: table-cell;    
    text-align: center;
    vertical-align: middle;
}

Working Fiddle