如何相对于兄弟元素实现垂直居中

之前遇到的垂直居中大部分都是相对于父元素居中，方法也很多，如flex、margin、absolute等等，之前也总结过了，这里就不多赘述，但是这次的需求是相对于兄弟元素实现垂直居中，还是花费了一些时间才解决的（也可能是由于思维定势，一时半会没想起来）

一、需求效果

可以看到右侧的按钮，是相对于左侧的文字内容垂直居中的，而且内容的行数可能是一行或者两行

二、方法尝试（使用flex）

在父元素上加上：

    display: flex;
    align-items: center;

效果如下：

虽然实现了垂直居中，但是设计说

"不行，文字内容的上边距不一样了"

仔细一看，还真是，这是为什么呢？

于是我加了个背景色

会发现，其实父元素的高度已经被按钮撑开了（父元素没有设置height）所以这条路走不通

根据上边的尝试，我们自然而然就想到，要想不让按钮撑开父元素的高度，就必须让按钮脱离文档流 ，于是想到用absolute试一下

在按钮元素上加上：

position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);

在父元素上加上:

position: relative;

效果如下：

确实这次父元素没有被按钮的撑开高度了，此时父元素的高度就是文字内容的高度，棒！

三、总结 

父元素设置position: relative，按钮元素设置position: absolute，让按钮元素脱离文档流，然后设置位置垂直居中即可