在较小的父级中水平居中旋转div

Question

我想在较小的父母中水平居中-10度旋转的div。

我希望这样，旋转div的中间点位于父块的中心。 （我用一些测试文本标记了中间点。但这只是为了标记它。）

如何解决这个问题？

https://jsfiddle.net/ytL9ybww/3/

body {
      padding:0 0 0 0;
      margin: 0 0 0 0;
      padding-left:300px;
      overflow:hidden;
    }
    
    nav {
      height:100vh;
      width:300px;
      position:fixed;
      top:0;
      left:0;
      background-color:black;
    }
    
    .block {
      width:100%;
      position:relative;
      overflow:hidden;
    }
    
    .rotated-block {
      position:relative;
      z-index:10;
      top:300px;
      left:0;
      text-align:center;
      width: 5000px;
      height:900px;
      background-color:green;
      transform:rotate(-10deg);
    }

<div class="block">
  <nav>

  </nav>
  <div class="rotated-block">
    test
  </div>
</div>

Answer 1

首先将块居中（绝对定位和变换），然后旋转它。

＆＃13;

＆＃13;

.parent {
  height: 80vh;
  width: 80vw;
  margin: 1em auto;
  position: relative;
  border: 1px solid grey;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  background: red;
  width: 110%;
  height: 50px;
}

.center {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: green;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<div class="parent">
  <div class="child"></div>
  <div class="center"></div>
</div>

＆＃13;

＆＃13;

＆＃13;