如何在不使用flexbox的情况下垂直对齐两个响应式div？

<div style="display: table; height: 100%;">
  <div style="display: table-cell; vertical-align: middle;">
    <!-- 第一个响应式div -->
    <div>Content 1</div>
    <!-- 第二个响应式div -->
    <div>Content 2</div>
  </div>
</div>

<div style="position: relative; height: 100%;">
  <!-- 第一个响应式div -->
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">
    Content 1
  </div>
  <!-- 第二个响应式div -->
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">
    Content 2
  </div>
</div>