html - 居中图片CSS/HTML

我在将图片放在CSS居中时遇到问题，

我有这个：

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

因此，基本上我想创建一个站点，当我去发布带有图像的文章时，我想要获取该图像，并且与他的大小无关，我希望该图像以“菱形workcontainer3”为中心。
像这样：



所以有人知道我在做什么错吗？

最佳答案

我不知道您的html，但是您可以尝试此操作，前提是您的.wc3_inside位于.workcontainer3内部。

.workcontainer3 {
  display: table;
}

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

Working Fiddle