以前一直用margin-top:50%,transform:translateY(-50%)来实现垂直居中，但是今天在自己做banner的上下切换按钮的垂直居中的时候才发现，margin-top的%值是相对于父元素的宽度的。
也可以改变布局：writing-mode:vertical-rl;为纵向排列,那么相对的百分比就是相对于高度了。
用top：50%，配合transform:translateY(-50%)就没有这个问题，可以完美的实现垂直居中。
免责声明！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。
猜您在找
(转)当margin-top、padding-top的值为百分比时是如何计算的？
css margin-top设置的百分比竟然是基于父元素的宽度来计算的
CSS--百分比都是相对于谁计算的?
相对定位、绝对定位 top为百分比的问题
当margin与padding的值设置为百分比时？
css padding和margin的百分比
关于margin和padding取值为百分比和负值的总结
css百分比问题——`top`、`left`、'translate'的百分比参照谁？
css relative设置top为百分比值
注意padding-top 百分比定义基于父元素宽度的百分比上内边距！！是基于宽度