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

Question

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

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

怎么办？

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

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

.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>

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

Horizontally center rotated div in smaller parent

html

javascript

css

center