元素旋转90度后居中

发表于 更新于 分类于 本文字数： 168 阅读时长 ≈ 1 分钟
1
2
3
<div class="outer">
    <div class="inner rotate">Centered?</div>
</div>

div.outer是一个窄垂直条。 div.inner旋转90度。我想要文本居中？出现在其容器div.outer中心。不确定div.outer的大小。

See the Pen qodqzq by Jake (@JakeLaoyu) on CodePen.

关键是将顶部和左边的位置设置为50％，然后将transformX和transformY设置为-50％。

1
2
3
4
5
6
7
8
9
.inner {
    position: absolute;
    top: 50%;
    left: 50%;
}

.rotate {  
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

原文地址 https://codeday.me/bug/20171009/83576.html