在前端布局中，如何更优雅地实现以下布局

Question

样式如下:

我的方式:

以上代码虽然实现了我想要的样式，但是"水平列表"元素的margin-top的值是写死的，最好的方式应该是负该元素的高度的一半，但css中无法获取元素的高度，通过js获取感觉又没有必要，有更好的实现方式没有?

Answer 1

使用元素transform: translateY(-50%);
多看看css