在旋转的 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-wraps

中的文本的角度

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

问题：两次旋转让内容向左滑动一点导致有点烦人看到 link :)

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

我该如何解决这个问题？

Answer 1

您可以尝试为标题指定宽度，然后使用 50% 和 margin-left: -(half of the width of the element) 将其相对于您的 window 定位。在这种情况下，我使用 -140px

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

Answer 2

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

在旋转的 div 中居中 div

Centering divs in rotated divs

css

rotation

centering