CSS动态保证金？

Question

编辑：我添加了一个小提琴https://jsfiddle.net/ocruzwrt/ 基本的绿色方块必须保持垂直居中不改变HTML ..

我工作的一个项目，基本上它的旧网站，它必须适应移动。当然，很多事情都需要从头开始编写，但我不能这样做，我没有足够的时间。

因此，我正面临着一个巨大的问题，即垂直对齐图标菜单，该菜单被设计为具有精灵背景的空白div，而容器的高度始终较小。

不幸的是，我不能使用这些因各种原因：

• Flexbox的
• 显示表
• 绝对positionning

我留下了这种解决办法..它更多或减少图标始终垂直居中：（请注意其写入LESS）

@media only screen and (max-width: 600px) { 
     #menu-mobile-top {#menu-mobile-btn {margin-top: 2.5%}} 
} 
    @media only screen and (max-width: 500px) { 
     #menu-mobile-top {#menu-mobile-btn {margin-top: 2%}} 
} 
    @media only screen and (max-width: 400px) { 
     #menu-mobile-top {#menu-mobile-btn {margin-top: 1%}} 
} 
    @media only screen and (max-width: 350px) { 
     #menu-mobile-top {#menu-mobile-btn {margin-top: 0%}} 
} 

但写得不好。有什么方法可以写得更好吗？理想情况下，我以600％的价格开始2.5％，以350％的价格结束0％。

Answer 1

如果你是用css写的，你说得对：写得很糟糕。这是纠正：

@media only screen and (max-width: { 
    600px) { 
     #menu-mobile-top > #menu-mobile-btn; 
    } 
    500px) { 
     #menu-mobile-top > #menu-mobile-btn; 
    } 
    400px) { 
     #menu-mobile-top > #menu-mobile-btn; 
    } 
    350px) { 
     #menu-mobile-top > #menu-mobile-btn; 
    } 
} 

Answer 2

喜欢这个？

https://jsfiddle.net/j3u5282d/

.spacer { 
    width: 100%; 
    padding-bottom: 5%; /* speed of expanding */ 
}