Как выровнять значение в центре ячейки таблицы?

Question

Я заполняю ячейку линией SVG + кружком SVG, и этот кружок находится сверху линии. это отлично работает, но их позиция не в центре, а в левом верхнем углу.

td {
   position: relative;
}
    
td svg {
   position: absolute;
   top: 0;
   left: 0;
}
    
svg.circle { 
   top: 1px;
   left: 1px;
}

<table>
    <td height="20" width="20" align="center" valign="center" class="col3 row6">
        <svg class="circle" height="18" width="18">
            <circle cx="9" cy="9" r="6" fill="red"></circle>
        </svg>
        <svg class="line" height="20" width="20">
            <line x1="0" y1="9" x2="20" y2="9" style="stroke:red;stroke-width:5"></line>
        </svg>
    </td>
</table>

Даже если я удаляю часть CSS, она остается в левом верхнем углу, но когда я удаляю position: absolute, это решает проблему, но круг больше не на вершине.

Answer 1

* {
  margin: 0;
  padding: 0;
  border: 0;
}

td {
  position: relative;
  border: 1px solid red;
}

td svg {
  position: absolute;
  top: 1px;
  left: 0;
}

.circle {
  left: 1px;
}

<table>
  <td height="20" width="20" align="center" valign="center" class="col3 row6">
    <svg class="circle" height="18" width="18">
        <circle cx="9" cy="9" r="6" fill="red"></circle>
    </svg>
    <svg class="line" height="20" width="20">
        <line x1="0" y1="9" x2="20" y2="9" style="stroke:red;stroke-width:5"></line>
    </svg>
  </td>
</table>

Answer 2

Использование должно использовать flexbox на мой взгляд.

.cell-content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

<table>
<div class='cell-content'>
<td height="20" width="20" align="center" valign="center" class="col3 row6">
    <svg class="circle" height="18" width="18">
        <circle cx="9" cy="9" r="6" fill="red"></circle>
    </svg>
    <svg class="line" height="20" width="20">
        <line x1="0" y1="9" x2="20" y2="9" style="stroke:red;stroke-width:5"></line>
    </svg>
</div>
</td>
</table>