'vertical-align:middle' in absolutely positioned element within absolutely positioned parent

I'm working with a custom table (all divs, no table>, no th>, tr> etc...)
What I'm trying to achieve is to vertically align the content of the children (cell) element (which is absolutely positioned). I've tried other workarounds but they seem not to work since the parent (row) element is also absolutely positioned

I've also tried other hacks/workarounds (setting the line-height same as the height of the cell).
Flex alignment is also not optimal since there are other elements in the cell that I don't want to intervene in.

To reproduce my layout

<div class='row'>
    <div class='cell cell-x'>
      CONTENT
    </div>
</div>

    .row {
        position: absolute;
        left: 0;
    }
    
    
    .cell{
        position: absolute;
        overflow: hidden;
        white-space: nowrap;
        padding: 4px 6px 3px 6px;
        border-right: 1px solid rgba(0, 0, 0, 0.2);
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        background: white;
        outline: none;
    }
    
    .cell-x {
        left: 0px;
        top: 50px;
        width: 112px;
        height: 50px;
        vertical-align: middle;
    }

• Height of the cell is known.

I also tried setting .row { display: table; } and .cell .general { display: table-cell;}

Restrictions: Neither of the elements' positions can be changed.

You can achieve the desired result by using a combination of techniques. Here's an approach you can try:

Add a wrapper element inside the cell to act as a container for the content:

<div class='row'>
  <div class='cell cell-x'>
    <div class="content-wrapper">
      CONTENT
    </div>
  </div>
</div>

Apply the following styles to the wrapper element:

.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

Adjust the styles for the cell and row elements:

.row {
  position: absolute;
  left: 0;
}

.cell {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  padding: 4px 6px 3px 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  background: white;
  outline: none;
}

.cell-x {
  left: 0px;
  top: 50px;
  width: 112px;
  height: 50px;
}

By adding the height: 100% to the content wrapper and setting display: flex, align-items: center, and justify-content: center, the content will be vertically aligned within the cell, regardless of the height of the cell.