代码之家 › 专栏 › 技术社区 › user7803115

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

center css html javascript

-2

user7803115 · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

Paulie_D 7 年前

首先将块居中(绝对定位和变换),然后旋转它。

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

推荐文章

HappyMe · HTML/CSS-如何在三个div中居中,独立于周围的div

6 年前

Sam · 使用Bootstrap 4将图像居中放置在另一个图像的顶部

6 年前

azro · 将不同大小的图像居中的通用方法

6 年前

AnonymousPug 55 · 如何使用Python 3在Tkinter中居中放置标签?

6 年前

PatrikJ · 宽度灵活的灯箱

6 年前

Leon N · 在HTML和CSS页面上居中显示图像

7 年前

Dave · 无法使用文本对齐将文本居中:居中

7 年前

user7803115 · 在较小的父对象中水平居中旋转div

7 年前

Natesh bhat · 如何将QComboBox中的文本设置为与中心对齐,而不使其在PyQt中可编辑

7 年前

Wilson · 使用以css为中心的页面剪裁或省略号文本困难

7 年前