margin-top的值为%,是相对于谁的百分比

以前一直用margin-top:50%,transform:translateY(-50%)来实现垂直居中,但是今天在自己做banner的上下切换按钮的垂直居中的时候才发现,margin-top的%值是相对于父元素的宽度的。

也可以改变布局:writing-mode:vertical-rl;为纵向排列,那么相对的百分比就是相对于高度了。

用top:50%,配合transform:translateY(-50%)就没有这个问题,可以完美的实现垂直居中。

posted @ 2019-01-22 14:51  coconutGirl  阅读(5604)  评论(0编辑  收藏  举报