css实现div垂直居中(绝对定位+translate)

用vue写侧边栏组件的时候碰到了按钮组无法自适应垂直居中的问题，想要单纯用css来实现，看到了很多方法，多次尝试下还是以下这个方法最简便好用，特此记录。

div{
    position:fixed;
    right:7px;//这里原本是内联样式，为方便理解写上
    top: 50%;
    transform: translate(0, -50%);
  }

效果图：

这里的右侧按钮组是动态添加的，所以无法通过减去固定的像素值来实现居中，这里用了transform: translate(0, -50%);的方法来减去元素高度的50%，动态计算。