在旋转div中居中div

Question

我快要疯了，我正在尝试将一些div居中（相对于视口）。 问题是我要居中的div嵌套在一些旋转的div（4deg）中。

.inner-wrap{
   width: 200vw;
   position: relative;
   padding: 20vh 0;
   right: -50vw;
   left: -50vw;
   bottom: -50px;
   transform-origin: bottom left;
   transform: rotate(-4deg);// HERE THE ROTATION
   margin: auto;
}

我更正了嵌套在.inner-wrap中的文章中文本的角度

article{
  transform: rotate(4deg);
  max-width: 960px;
  margin: auto;
}

问题：两次旋转使内容向左滑动一点，导致有点烦人，请参阅链接:)

https://drive.google.com/file/d/0Bw4B9Lk7vRtda3p4TWpWNzhBZVU/view?usp=sharing

我怎样才能解决这个问题？

Answer 1

您可以尝试给标题加上宽度，然后相对于窗口使用50% margin-left: -(half of the width of the element) -140px margin-left: -(half of the width of the element)在这种情况下，我使用了-140px

section.who article.logo {
    max-width: 280px;
    position: relative;
    left: 50%;
    margin-left: -140px;
}

Answer 2

好吧，我是个白痴！ 我将旋转原点设置为左下角而不是中心....