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

【问题标题】：Horizontally center rotated div in smaller parent在较小的父级中水平居中旋转的 div
【发布时间】：2018-01-01 15:13:38
【问题描述】：

我想在较小的父级中水平居中旋转 -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>

【问题讨论】：

jsfiddle.net/ytL9ybww/1
旋转的超出了可见区域，似乎没有逻辑
@ÁlvaroTouzón 错误，nav 应该在 .block 之外
然后把html放好，因为在里面

标签： javascript html css center

【解决方案1】：

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

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

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

【讨论】：