Вертикально выровнять абсолютное позиционирование DIV с левым значением внутри элемента TD в IE11

Question

Я поместил некоторый элемент div внутри элемента TD с левым значением, используя position: absolute и left value, но мне нужно выровнять div вертикально по центру без фиксированного значения поля и отступа, потому что мой TDвысота может быть чем угодно.Я добавил образец для справки, любая помощь?

.content {
  position: absolute;
  left: 20px;
  background: grey;
  width: 100px;
  height: 20px;
}

td {
  border: 1px solid grey;
  border-collapse: collapse;
  /* Works in chrome, Firefox, Edge but not in IE 11*/
  display: flex;
  align-items: center;
}

.content2 {
  position: absolute;
  left: 140px;
  background: grey;
  width: 100px;
  height: 20px;
}

<table>
  <tr>
    <td style='width:300px;height:30px;'>
      <div class='content'>
      </div>
      <div class='content2'>
      </div>
    </td>
  </tr>
</table>

Спасибо,

Answer 1

Вы можете использовать display: inline-block для div'ов и vertical-align:middle для клеток.Затем он выравнивает вертикаль div по центру, независимо от высоты строки таблицы.

  .content {
     display: inline-block;
     background: grey;
     width: 100px;
     height: 20px;
     vertical-align: middle;
   }
  tr{
    height: 90px;
  }
   td {
     border: 1px solid grey;
     border-collapse: collapse;
   }

   .div1{
     margin-left: 20px;
   }
   .div2{
     margin-left: 40px;
   }

<table>
  <tr>
    <td style='width:300px;height:30px;'>
      <div class='content div1'>
      </div>
      <div class='content div2'>
      </div>
    </td>
  </tr>
</table>

Fiddle

Примечание , что,в отличие от float, с inline-block пробелом между div будет отображаться!Так что, если вы не закодируете их как <div>...</div><div>...</div>, вы можете увидеть некоторые лишние пробелы.