元素旋转90度后居中

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

Disqus 加载中...

如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理