用vue写侧边栏组件的时候碰到了按钮组无法自适应垂直居中的问题,想要单纯用css来实现,看到了很多方法,多次尝试下还是以下这个方法最简便好用,特此记录。
div{
position:fixed;
right:7px;//这里原本是内联样式,为方便理解写上
top: 50%;
transform: translate(0, -50%);
}
效果图:
这里的右侧按钮组是动态添加的,所以无法通过减去固定的像素值来实现居中,这里用了transform: translate(0, -50%);
的方法来减去元素高度的50%,动态计算。