Javascript 基于元素高度的CSS？

我有一个按钮，它根据屏幕大小改变其高度，因为文本行中断

当屏幕尺寸足够大时，按钮将非常适合：

但当它变小时，按钮停止居中：

我尝试应用

@media

设置：

@media (max-width: 767px) {
    #footer-content input[type="button"],
    #footer-content button {
        margin-top: -22px;
    }
}

@media (min-width: 768px) {
    #footer-content input[type="button"],
    #footer-content button {
        margin-top: -10px;
    }
}

当断线发生时，它可以完美地工作：

但如果没有，且屏幕小于767px，则会再次分散：

---

所以我希望可以根据按钮的高度而不是屏幕的宽度来制作CSS，但我所做的研究没有太大帮助，所以，是否可以通过CSS来制作CSS，或者我会被迫使用javascript？

尝试使用flexbox。如果这实际上是一个输入类型范围，您甚至不需要指定

align items:center以使其工作。

CSS

HTML


像按钮一样的东西
您可以使用“显示表格”和“垂直对齐中间”属性，使按钮和范围滑块始终位于容器的中心，如下面的代码所示

      <div>
          <div style="display:table">
               <div style="display:table-cell;vertical-align:middle"><input type='range'></div>
               <div style="display:table-cell;vertical-align:middle"><input type="submit" value = 'something'/></div>   
          </div>
      </div>

Flexbox将在睡眠中执行此操作。
<div class="wrapper">
  <input class="range" type="range" />
  <span class="button">
    Some type of button-like thing
  </span>
</div>

      <div>
          <div style="display:table">
               <div style="display:table-cell;vertical-align:middle"><input type='range'></div>
               <div style="display:table-cell;vertical-align:middle"><input type="submit" value = 'something'/></div>   
          </div>
      </div>