当调整浏览器大小时，CSS3转换的div会移动

Question

我的专栏看起来像这样：

这看起来不错，但当我缩小浏览器时，div 向上移动，如下所示：

我希望它在缩小时保持原状：

知道这里发生了什么 - 是否有针对此的css修复？

js（反应）：

<div>
     <Icon name="plus" style={{display: 'block', margin: '0 auto'}}/>
     <div className="rotate-div">TESTING</div>
</div>

的CSS：

.rotate-div {
    transform: rotate(270deg) !important;
    margin-top: 30px !important;
}

我尝试增加容器的高度，去除填充物，增加更多的余量，但似乎没有任何区别。

Answer 1

首先，我不建议使用!important，这是不好的做法并混淆了你的代码。在这里，您只需要在“测试”和图标之间进行填充。对于旋转div：

.rotate-div {

    padding-top: 20px; /* You can change the pixel amount */

}

删除margin-top和！importants

Answer 2

最后，我更容易在父元素上使用position: relative，在子元素上使用position: absolute。

这是一个小提琴：

https://jsfiddle.net/aqmbbL2s/1/