Incorrect position of node using display: flex and getBoundingClientRect

Question

Parent node (document.body) has properties

    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    
    display: flex;
    align-items: center;
    justify-content: center;

and children (HTMLDivElement[])

    width: 12.5em;
    height: 20em;

What I'm doing is, let the browser (Firefox 112.0.1 (32-bit)) place all the children via body.append(...) and then grab their positions with getBoundingClientRect(), then put positions back as style properties adding position: absolute. I expect that positions of children stay same but instead every child has horizontal offset of half of their width according to their left-hand neighbour (overlapping each other). Delay between rendering and repositioning does not matter. What am I doing wrong?

Expecting that all the elements after described procedure visually stay same, no overlapping, no nothing.